إنشاء محرك بحث على Youtube باستخدام JQuery(Youtube Data API 3)




Hai All, ketemu lagi bersama saya pria tampan asli sunda :), mohon maaf dah lama gak bikin tutorial karena kesibukan saya. Untuk kali ini saya akan membuat tutorial membuat search engine youtube dengan menggunakan Youtube Data API 3 dari google. Sebelum memulai tutorial anda harus mempunya API Key dari google, untuk mendapatkan nya bisa cek di sini https://console.developers.google.com, setelah itu anda bisa lihat di pojok kanan atas di situ ada project lalu klik proyek baru serperti gambar dibawah ini

create-youtube-api-v3

Klik tombol Buat maka muncul seperti gambar dibawah ini, lalu pilih youtube Data API

create-youtube-api-v3-copy1

Seteleah klik maka akan muncul halaman seperti dibawah ini, lalu klik Aktifkan create-youtube-api-v3-copy2

Setelah klik Aktifkan anda akan dibawah ke halaman seperti dibawah ini lalu klik Button Buat Kredensial

create-youtube-api-v3-copy3

Setelah klik muncul seperti ini




create-youtube-api-v4

Pilih API yang digunankan Youtube DATA API v3, lalu setelan nya pilih browser Web dan Data yang akan di akses pilih Data Publik, setelah itu klik Tombol Kredensial apa yang saya butuhkan?

lalu akan muncul seperti gambar dibawah ini

create-youtube-api-v5

Nah yang saya block merah adalah API key yang nanti akan kita gunakan, mohon maaf saya block merah karena alasan privasi.

Setelah muncul ini maka klik selesai.




Sekarang kita aka buat halaman html nya dengan nama index.html, sebelumnya kita include jquery,fancybox dan lain2 seperti contoh dibawah ini

<النصي src="https://use.fontawesome.com/567fc88304.js"></النصي>
<النصي src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></النصي>
<النصي src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></النصي>
<النصي src="script.js"></النصي>
<حلقة الوصل rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.5">
<حلقة الوصل rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

Setelah itu kita buat content nya di dalam body seperti dibawah ini

<h5>AndezNET.com</h5>
<hr />
<شعبة صف دراسي="content">
<h2>إنشاء محرك بحث على Youtube باستخدام JQuery(Youtube Data API 3)</h2>
h2><أنا صف دراسي="fa fa-youtube" aria-مخفي="true"></أنا>YouTube Search Engine</h2>
<div id="custom-search-input">
<شعبة صف دراسي="input-group col-md-12">
<form id="search-form" name="search-form" onsubmit="return cariYoutube();">
<input type="text" صف دراسي="form-control" placeholder="Pencarian...." هوية شخصية="search" />
<امتداد صف دراسي="input-group-btn">
<زر صف دراسي="btn btn-primary btn-lg" نوع="submit" هوية شخصية="findNow">
<أنا صف دراسي="glyphicon glyphicon-search"></أنا>
</زر>
</امتداد>
</form>
</شعبة>
</شعبة>
<br><br>
<div id="hasil"></شعبة>
<br><br>
<div id="buttons"></شعبة>
</شعبة>

Setelah itu kita buat CSS nya untuk mempercantik content nya seperti dibawah ini

<أسلوب>
#custom-search-input{
    حشوة: 3مقصف;
    الحدود: solid 1px #E4E4E4;
    الحدود-نصف القطر: 6مقصف;
    خلفية-اللون: #FF0000;
}
 
#custom-search-input input{
    الحدود: 0;
    box-shadow: لا شيء;
    عرض: 93%;
}
 
#custom-search-input button{
    حافة: 2مقصف 0 0 0;
    خلفية: لا شيء;
    box-shadow: لا شيء;
    الحدود: 0;
    اللون: #666666;
    حشوة: 0 8مقصف 0 10مقصف;
    الحدود-اليسار: solid 1px #ccc;
}
 
#custom-search-input button:hover{
    الحدود: 0;
    box-shadow: لا شيء;
    الحدود-اليسار: solid 1px #ccc;
}
 
#custom-search-input .glyphicon-search{
    font-size: 23مقصف;
}
article {
  حافة: 10مقصف 0;
  خلفية: rgba(0,0,0,0.7);
  حشوة: 4px 20px;
}
 
.video-wrapper {
  position: fixed;
  أعلى: 0;
  right: 0;
  bottom: 0;
  اليسار: 0;
  تجاوز: مخفي;
  مع-فهرس:-1;
}
 
.video-wrapper video {
  position: fixed;
  أعلى: 0;
  right: 0;
  دقيقة-عرض: 100%; 
  دقيقة-ارتفاع: 100%;
  عرض: تلقاءي; 
  ارتفاع: تلقاءي;
}
 
.المحتوى {
  position: relative;
  حافة: 60px auto;
  عرض: 100%;
  ماكس-عرض: 800مقصف;
  مع-فهرس: 1;
}
.clearfix{
    الحدود-bottom: 1px dotted #ccc;
    حافة-bottom: 5مقصف;
}
.channel
{
    font-weight: 700;
    اللون: red;
}
.block a:hover{
    اللون: silver;
}
.block a{
    اللون: #fff;
}
.منع {
    position: fixed;
    خلفية: #2184cd;
    حشوة: 20مقصف;
    مع-فهرس: 1;
    أعلى: 240مقصف;
}
</أسلوب>

OK. content sudah, tampilan sudah sekarang kita buat fungsi nya, buat file baru dengan nama file script.js




Pertama kita buat variable dengan nama gapikey di script.js yang nantinya untuk mengambil API Key yang sebelumnya kita buat.

أين gapikey = 'API KEYS ANDA';

Kedua buat fungsi untuk menampilkan iframe dari francybox seperti ini

$(وظيفة() {
 
    // Memangil plugin fancybox
    $(".fancyboxIframe").fancybox({
        maxWidth    : 900,
        maxHeight    : 600,
        fitToView    : خاطئة,
        عرض        : '90%',
        ارتفاع        : '90%',
        autoSize    : خاطئة,
        closeClick    : خاطئة,
        openEffect    : 'none',
        closeEffect    : 'none',
        iframe: {
            scrolling : 'auto',
            preload   : صحيح
        }
    });
 
    $('#search-form').submit( وظيفة(e) {
        e.preventDefault();
    });
});

Ketiga kita buat fungsi pencarianya seperti dibawah ini

وظيفة cariYoutube() {
 
    $('#hasil').لغة البرمجة("<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></أنا><span class="sr-only">Mohon Tunggu...</امتداد>");
    $('#buttons').لغة البرمجة(");
 
    // Untuk get form input
    q = $('#search').فال();  
 
    // Untuk GET API youtube
    $.get(
        "https://www.googleapis.com/youtube/v3/search", {
            part: 'snippet, id',
            q: q,
            نوع: 'video',
            key: gapikey
        }, وظيفة(البيانات) {
            أين nextPageToken = البيانات.nextPageToken;
            أين prevPageToken = البيانات.prevPageToken;
 
            // Untuk Log data
            وحدة التحكم.سجل(البيانات);
            $('#hasil').لغة البرمجة(");
            $.each(البيانات.items, وظيفة(أنا, item) {
 
                // Get Output
                أين output = getOutput(item);
 
                // Menampilan hasil
                $('#hasil').ألحق(output);
            });
 
            أين buttons = getButtons(prevPageToken, nextPageToken);
 
            // Display buttons
            $('#buttons').ألحق(buttons);
        });
}

Keempat kita buat fungsi NextPage seperti dibawah ini,

وظيفة cariYoutube() {
 
    $('#hasil').لغة البرمجة("<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></أنا><span class="sr-only">Mohon Tunggu...</امتداد>");
    $('#buttons').لغة البرمجة(");
 
    // Untuk get form input
    q = $('#search').فال();  
 
    // Untuk GET API youtube
    $.get(
        "https://www.googleapis.com/youtube/v3/search", {
            part: 'snippet, id',
            q: q,
            نوع: 'video',
            key: gapikey
        }, وظيفة(البيانات) {
            أين nextPageToken = البيانات.nextPageToken;
            أين prevPageToken = البيانات.prevPageToken;
 
            // Untuk Log data
            وحدة التحكم.سجل(البيانات);
            $('#hasil').لغة البرمجة(");
            $.each(البيانات.items, وظيفة(أنا, item) {
 
                // Get Output
                أين output = getOutput(item);
 
                // Menampilan hasil
                $('#hasil').ألحق(output);
            });
 
            أين buttons = getButtons(prevPageToken, nextPageToken);
 
            // Display buttons
            $('#buttons').ألحق(buttons);
        });
}

Kelima kita buat prev page nya juga seperti dibawah ini

وظيفة prevPage() {
    أين token = $('#prev-button').البيانات('token');
    أين q = $('#prev-button').البيانات('query');
 
 
    $('#hasil').لغة البرمجة("<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></أنا><span class="sr-only">Mohon Tunggu...</امتداد>");
    $('#buttons').لغة البرمجة(");
 
    // get form input
    q = $('#search').فال(); 
 
     // Untuk GET API youtube
    $.get(
        "https://www.googleapis.com/youtube/v3/search", {
            part: 'snippet, id',
            q: q,
            pageToken: token,
            نوع: 'video',
            key: gapikey
        }, وظيفة(البيانات) {
 
            أين nextPageToken = البيانات.nextPageToken;
            أين prevPageToken = البيانات.prevPageToken;
 
            // Log data
            وحدة التحكم.سجل(البيانات);
            $('#hasil').لغة البرمجة(");
            $.each(البيانات.items, وظيفة(أنا, item) {
 
                // Get Output
                أين output = getOutput(item);
 
                // Menampilkan 
                $('#hasil').ألحق(output);
            });
 
            أين buttons = getButtons(prevPageToken, nextPageToken);
 
            // Display buttons
            $('#buttons').ألحق(buttons);
        });    
}

Keenam kita buat output hasil pencariannya seperti dibawah ini

وظيفة getOutput(item) {
    أين videoID = item.هوية شخصية.videoId;
    أين عنوان = item.snippet.عنوان;
    أين description = item.snippet.description;
    أين الإبهام = item.snippet.thumbnails.high.عنوان url;
    أين channelTitle = item.snippet.channelTitle;
    أين videoDate = item.snippet.publishedAt;
 
 
    أين output =        "<div class="col-md-6">" +
                            "<img src="' + الإبهام + "" class="img-responsive thumbnail" >" +
                        "</شعبة>" +
                        "<div class="input-group col-md-6">" +
                            "<h3><a data-fancybox-type="iframe" class="fancyboxIframe" href="http://youtube.com/embed/' + videoID + "?rel=0">" + عنوان + "</أ></h3>" +
                            "<small>By <span class="channel">" + channelTitle + "</امتداد> on ' + videoDate + "</small>" +
                            "<ص>" + description + "</ص>" +
                        "</شعبة>" +
                    "<div class="clearfix"></شعبة>";
    إرجاع output;
}

Ketujuh kita buat juga ouput ketika pindah ke halaman berikut nya seperti dibawah ini

وظيفة getOutput(item) {
    أين videoID = item.هوية شخصية.videoId;
    أين عنوان = item.snippet.عنوان;
    أين description = item.snippet.description;
    أين الإبهام = item.snippet.thumbnails.high.عنوان url;
    أين channelTitle = item.snippet.channelTitle;
    أين videoDate = item.snippet.publishedAt;
 
 
    أين output =        "<div class="col-md-6">" +
                            "<img src="' + الإبهام + "" class="img-responsive thumbnail" >" +
                        "</شعبة>" +
                        "<div class="input-group col-md-6">" +
                            "<h3><a data-fancybox-type="iframe" class="fancyboxIframe" href="http://youtube.com/embed/' + videoID + "?rel=0">" + عنوان + "</أ></h3>" +
                            "<small>By <span class="channel">" + channelTitle + "</امتداد> on ' + videoDate + "</small>" +
                            "<ص>" + description + "</ص>" +
                        "</شعبة>" +
                    "<div class="clearfix"></شعبة>";
    إرجاع output;
}




Selesai deh, mudah kan ? heheheh , jangan lupa memasukan API Key yang kita buat tadi ke Variable gapikey. Ok sekian Tutorial kali ini untuk script lengkap nya bisa di download disini تحميل dan demo nya bisa di cek disini DEMO.

 

 

 

 

 

ربما يعجبك أيضا...

اترك رد

لن يتم نشر عنوان بريدك الإلكتروني. الحقول المطلوبة محددة *

NEWS INFO : Aplikasi Sytem Pengarsipan Surat

Aplikasi ini digunakan untuk mempermudah pengelolaan surat masuk, surat keluar, disposisi dan pencarian arsip surat.

Dengan fitur yang lengkap, akan sangat membantu mempermudah pengelolaan surat di Instansi atau Perusahaan Anda.
Adapun beberapa fitur ASPAS seperti dibawah ini
  • Surat Masuk :Surat yang diterima oleh suatu instansi yang berasal dari instansi lain
  • Surat Keluar : Surat yang di keluarkan/dibuat untuk di kirimkan kepada instansi lain
  • Disposisi : Pendistribusian Surat Masuk dan Surat Keluar ke penerima terkain dalam internal kantor
  • Laporan : Laporan surat masuk dan surat keluar per tanggal, dan cetak disposisi
  • In Front Office : Yang di gunakan untuk keperluan di bagian front office, seperti hal nya buku tama.
Aplikasi ini terdiri dari 7 Hak akses yaitu, Admin, Staff Tata Usaha, Kepala Badan, Kepala Bidang, Kepala Sub Bagian, Sekretaris dan Pelaksana.
Untuk link demo bisa cek di aspas.andeznet.com dan username,password dibawah ini.
Admin Username: andez Password : andez
Pelaksana Username: raka Password : raka
Kepala Bidang Username: agung Password : agung
Sekretaris Username: shinta Password : shinta
Staff Tata Usaha Username: sutisna Password : sutisna
Kepala Sub Bagian Username: nurlaila Password : nurlaila
Kepala Badan Username: asep Password : asep
Untuk mendapatkan source code bisa hubungi saya via sms atau whatsapp saya di nomor 082213148092