Link kısaltıcı yapmak

Uzun ve yazması zor olan linkleri kısaltmak için web sitelerine mutlaka denk gelmişsinizdir. Bunlardan en bilineni 63 m$ yatırım alan “bit.ly”.
Bu miktar, bir fikir ve birkaç satır kodun değerini çok iyi gösteriyor.

Bu sistemin basit bir örneğini hazırladım.

1. adım Python ile yazılmış kodumuz.

Aşağıdaki scriptte arasından seçim yapmak üzere bir karakter listesi hazırladım (charlist).

Harfleri arka arkaya rahat sıralayabilmek için shortened isimli bir array değişkeni açıp for döngüsü ile rasgele 6 karakteri append komutu yardımıyla array içine sıraladım.

Oluşturulan kod listesini daha önce oluşturulmuş olan shortedList verilerimin arasından kontrol ettirmek için (normalde database’den çekeceğim) tüm bunları while döngüsüne aldım. For ‘da oluşturulduktan sonra listeden var olup-olmadığını kontrol ediyor, varsa geçici belleği temizleyip yeniden oluşturuyor. Eğer var ise ok değişkenimi true olarak değiştiriyorum ve while’dan çıkarıyorum.

Oluşturulan kısa kodu console’a yazdırıyorum.

Yalnız buradaki kod biraz basit olduğu için büyük-küçük harf uyumuna dikkat etmedim, verileri database’den kontrol ettirme kısmında SQL sorgusunda BINARY komutu yardımıyla zaten dikkat edecek.

#random string generator

import random


def createShortLink(longLink):
    charlist = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890"
    shortened = []
    shortedList = ["WqUwmg", "V1Dwgh", "zo5CIO", "7plO0G"]
    temp = ""

    ok = False
    while(not ok):
        for i in range(6):
            shortened.append(random.choice(charlist))
        temp = temp.join(shortened)
        if temp in shortedList: #büyük küçük harf için düzenleme yapılacak
            shortened = []
            temp = ""
        else:
            shortedList.append(temp)
            ok = True

    print("Uzun baglantiniz:", longLink)
    print("Kisa Kodunuz:",temp)
    print(shortedList)

    return temp

2. adım, uygulamayı web’de yayınlayacağım için Python’da kullanabileceğim bir web framework’üne ihtiyacım var, en bilineni Django fakat hızlı yazılabilmesi için ve fazla detaya ihtiyaç duymadığı için bu projede Flask’ı tercih ettim.

Yukarıda hazırladığım scripti kullanabilmek için programımın içine import ile çekmem gerekiyor import link_shortener
ayrıca render_template, request, redirect, url_for metodları da kullanacağımdan bunları da flask kütüphanesinden çekmem gerekir.

Flask her ne kadar MVC yapısında olmasa da route burada da ihtiyaç oluyor, web istemciden gelen istekleri burada yönlendiriyoruz.

Siteyi doğrudan açtığımızda “/” yoluna girecek, burada indexi görüntülemek istiyorum, yani home page. “@app.route” şeklinde kullanımlar decorator olarak isimlendirilir. Bir de bilgi sayfası olmasını istediğim için info isimli bir yönlendirme hazırladım ancak bu yönlendirme sonunda şablon (template) değil de sadece bir string döndürüyor, burada görüntülenmesi için özel bir html sayfa hazırlamam gerekiyor. Bu şekilde çıkacak olan sonuç boş sayfanın sol üst köşesinde “Boran Corp.” yazması olur.

13. satırda ise asıl işi gören kısım var, flask ile gelen isteğin POST veya GET olduğunu rahatlıkla ayırt edebiliriz. Bunun için methods değişkenini bildirmem gerekir.
Ardından ismi önemli olmayan bir method açarak POST konrolünü yapıyorum.
HTML sayfamdan ile POST ile gönderdiğim veriyi webdenGelenVeri = request.form.get(“link”) ile çekiyorum.

Yukarıdaki scriptte oluşturduğum metoda uzun linki gönderiyorum shortLink = link_shortener.createShortLink(webdenGelenVeri), o da uzun linki kaydedip, kısa link oluşturup döndürüyor. Gelen linki render_template ile hangi HTML sayfasına ve hangi değişken adıyla basacağımı veriyorum, verileri kullanıcıya göndermiş oluyorum.

from flask import Flask, render_template, request, redirect, url_for
import link_shortener

app = Flask(__name__)
@app.route("/")
def index():
    return render_template("index.html")

@app.route("/info")
def search():
    return "Boran Corp."

@app.route("/", methods = ["GET", "POST"])
def shortIt():
    if request.method == "POST":
        webdenGelenVeri = request.form.get("link")
        shortLink = link_shortener.createShortLink(webdenGelenVeri)
        return render_template("index.html", longLink = webdenGelenVeri, shortLink = ("/" + shortLink))
    else:#GET
        return redirect(url_for("index"))

if __name__ == "__main__":#localhost kontrolü
    app.run(debug = True)#web sunucusunu çalıştırır

oluşturacağınız HTML dosyalarını proje altında “templates” isimli bir klasör içine koymanız gerekiyor.

3. adım, HTML front kısmı. Python’dan gelen verileri sade bir sayfayla kullanıcıya aktarmak istedim.

HTML kısmı süslemelerden kaynaklı olarak biraz uzun ama dikkat çekmek ve kullanımı kolaylaştırmak istiyorsak süsleme şart.

HTML sayfasında Python’dan gelen verileri okumak için 2. kodlarda gönderdiğimiz değişken isimlerini kullanmamız gerekiyor. Okuma şekli {{değişken_ismi}} (satır 24) şeklinde yapılıyor, eğer if gibi işleyici kod çalıştırmak istiyorsak {%kod%} (satır 23) şeklinde kullanmamız gerekiyor.

Burada dönen veri olması durumunu 23. satırda if ile kontrol ettirdim, eğer veri varsa h4 içine longLink değişkenini ve h2 içinde a içine shortLink değişkenini koydum. Yanına da kullanıcının hızlı bir şekilde kopyalayabilmesi için kopyalama sembolü ve bunu çalıştıracak JS kodu ekledim.
Bu arada Python ile web programlama işime yeni başladığım için takıldığım bir şey oldu. CSS dosyalarını HTML’e doğrudan gösteremedim. Bunun için Flask’ın tanıdığı bir klasör ismi varmış “static” bu isimde bir klasör oluşturarak assets klasörümü içine koydum, style çağırma kodunu da
<link rel=”stylesheet” href=”{{ url_for(‘static’, filename=’assets/css/styles.css’) }}”>
şeklinde düzenledim.

Bu arada hatırlatma, oluşturduğum HTML dosyaları da templates klasörünün içinde olmak zorunda

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='assets/css/styles.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='assets/css/bootstrap.css') }}">
    <link href="{{ url_for('static', filename='assets/css/bootstrap.css') }}" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
    <div class="ortala">
        <form action="/" method="post">
            <input style="height: 2em; font-size:2em" type="text" name="link" class="form-control" placeholder="link here" aria-label="Large" aria-describedby="basic-addon1">
        </br>
            <div class="row">
              <div class="col text-center">
                    <button style="height: 3em; width:80%; margin: 0 auto;" type="submit" class="btn btn-primary">CREATE SHORT URL</button>
              </div>
            </div>
        </form>
        </br>
        {%if longLink%}
        <h4 class="link">Long link: {{longLink}}</h4>
        <h2>Short link: <a href="{{shortLink}}" id="shortLink">aa.com{{shortLink}}</a></h2>
        <span onclick="copyToClipboard('#shortLink')" class="glyphicon glyphicon-copy" style="position:absolute; font-size:5em; left: 84%; top: 70%;"></span>
        {%endif%}
    </div>
    <script>
        function copyToClipboard(element) {
          var $temp = $("<input>");
          $("body").append($temp);
          $temp.val($(element).text()).select();
          document.execCommand("copy");
          $temp.remove();
        }
    </script>
</body>
</html>