113 lines
No EOL
6.8 KiB
PHP
113 lines
No EOL
6.8 KiB
PHP
<?php
|
|
include "../internal/mysql.php";
|
|
|
|
?>
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>URL Kürzer V2 - Jonas Leder</title>
|
|
|
|
<link href="/css/style.css" rel="stylesheet">
|
|
<link href="/css/normalize.css" rel="stylesheet">
|
|
<link href="/css/sourcesanspro.css" rel="stylesheet">
|
|
<link href="/css/menue.css" rel="stylesheet">
|
|
<script src="https://kit.fontawesome.com/038c6c1f0e.js" crossorigin="anonymous"></script>
|
|
<!-- Matomo -->
|
|
<script type="text/javascript">
|
|
var _paq = window._paq = window._paq || [];
|
|
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
|
_paq.push(["setCookieDomain", "*.jonasled.de"]);
|
|
_paq.push(['trackPageView']);
|
|
_paq.push(['enableLinkTracking']);
|
|
(function() {
|
|
var u="//matomo.jonasled.de/";
|
|
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
|
_paq.push(['setSiteId', '1']);
|
|
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
|
g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
|
})();
|
|
</script>
|
|
<noscript><p><img src="//matomo.jonasled.de/matomo.php?idsite=1&rec=1" style="border:0;" alt="" /></p></noscript>
|
|
<!-- End Matomo Code -->
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="header-wrapper">
|
|
<div class="header-homepage color-overlay" data-parallax-depth="20">
|
|
<div class="header-description gridContainer content-on-center">
|
|
<div class="row header-description-row">
|
|
<div class="header-content header-content-centered">
|
|
<div class="align-holder">
|
|
<h1 class="heading8">URL Kürzer V2</h1>
|
|
<p class="header-subtitle"> </p>
|
|
<div class="header-buttons-wrapper"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-separator header-separator-bottom ">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none">
|
|
<path class="svg-white-bg" d="M737.9,94.7L0,0v100h1000V0L737.9,94.7z"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div id="mainMenu" includeHTML="/include/menue.php?page=projekte"></div>
|
|
</header>
|
|
<div id="content">
|
|
<p>Mein alter URL kürzer war zwar schon gut, jedoch hatte ich den kompletten Code sehr unübersichtlich gestaltet mit allem in einer PHP Datei und Alis Konfigurationen im Webserver. Dies war alles sehr unübersichtlich und schwer zu erweitern, selber hosten. Daher habe ich mich entschieden alles von vorne zu Programmieren und dabei auf möglichst übersichtlichen Code zu achten. Desweiteren war mir wichtig, dass jeder den URL kürzer mit möglichst kleinem Aufwand selber hosten kann. Daher habe ich mich für Python mit Flask und Waitress als Webserver entschieden. Das schöne an Flask ist, dass man eine dynamische HTML-Datei hat und im eigentlichen Python Script nur noch die Platzhalter ausfüllt. Als Datenspeicher habe ich mich diesesmal für SQLite entschieden, da dieses von der Performance völlig ausreichend ist und mit weniger Aufwand verbunden ist. Zum einfachen selber aufsetzen habe ich alles in einen Docker-Container verpackt. Neben des komplett neu geschriebenen Codes habe ich auch ein paar neue Features verbaut. So stehen nun mehrere Domains zur Verfügung (wie man es von adf.ly kennt). Zur Zeit sind es 8 Domains, dies kann sich aber noch ändern. Eine weitere Veränderung ist, dass nach dem kürzen eines URLs nun auch ein QR-Code angezeigt wird, mit diesem ist das teilen der Links noch einfacher. Und zu guter letzt ein für mich sehr wichtiges Feature ist die Größe der Website. Die Neue Website ist jetzt nur noch wenige Kilobyte groß. Das Schöne an der Verteilmethode via Docker ist auch, dass es für den Server kaum Voraussetzungen gibt. So muss nur Docker installiert sein. Es empfiehlt sich zwar noch einen Webserver als HTTPS Proxy zu installieren. Dies ist aber nicht zwingend notwendig.</p>
|
|
<h3>UPDATES:</h3>
|
|
<ol><li>Ich habe mittlerweile einige neue Features implementiert. Dazu gehört ein Login System, mit welchem man seine eigenen Links einsehen und löschen kann. Dazu gibt es jetzt noch einen Darkmode, welcher automatisch eingeschaltet wird, wenn dies im Browser eingestellt ist. Dies waren jetzt die beiden Hauptänderungen, ich habe natürlich noch einiges mehr geändert / neu Implementiert, werde jetzt hier aber nicht alles aufzählen.</li><li>Überall wird aktuell ein Darkmode implementiert, warum also auch nicht hier.</li></ol>
|
|
<p>Der Quellcode ist <a href="https://git.jonasled.de/jonasled/url_shorter_docker">hier </a>zu finden. Dort ist auch eine <a href="https://gitlab.jonasled.de/jonasled/url_shorter_docker/wikis/install">Installationsanleitung</a>. Meine eigene Installation ist, wie der alte URL kürzer unter <a href="https://kurz.gq">kurz.gq</a> erreichbar.</p>
|
|
Aktueller build Status: <img src="http://gitlab.jonasled.de/jonasled/url_shorter_docker/badges/master/pipeline.svg"><br>
|
|
<img src="/img/kurz_ml_light.png">
|
|
<img src="/img/kurz_ml_ldark.jpg">
|
|
<h2>Kommentare:</h2>
|
|
<?php
|
|
|
|
$article = basename($_SERVER["SCRIPT_FILENAME"], '.php');
|
|
$result = $conn->query("SELECT * FROM comments WHERE article='$article'");
|
|
if ($result->num_rows > 0) {
|
|
while($row = $result->fetch_assoc()) {
|
|
$name = $row["name"] . "<br>";
|
|
$gravatar = get_gravatar($row["email"]);
|
|
$content = $row["comment"];
|
|
|
|
echo(<<<EOF
|
|
<h3 class="commentTitle">$name</h3>
|
|
<div class="comment">
|
|
<img src="$gravatar">
|
|
<article class="commentArticle">
|
|
<p class="commentText">$content</p>
|
|
</article>
|
|
</div>
|
|
EOF);
|
|
}
|
|
}
|
|
?>
|
|
|
|
<div id="newComment">
|
|
<form action="/newComment.php" method="post">
|
|
<label for="name">Name:</label><br>
|
|
<input type="text" id="name" name="name"><br><br>
|
|
|
|
<label for="email">E-Mail: (wird nicht veröffentlicht)</label><br>
|
|
<input type="text" id="email" name="email"><br><br>
|
|
|
|
<label for="comment">Kommentar:</label><br>
|
|
<textarea name="comment" id="comment"></textarea><br><br>
|
|
|
|
<input type="submit" value="Kommentar veröffentlichen"><br>
|
|
<p>Mit dem klick auf den obigen Button erklären sie sich mit der <a href="/datenschutzerklaerung.html">Datenschutzerklärung</a> einverstanden.</p>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<footer includeHTML="/include/footer.php">
|
|
</footer>
|
|
<script src="/js/includeHTML.js"></script>
|
|
</body>
|
|
</html>
|