اپیلیکیشن جست و جوی ویدئو

اپیلیکیشن جست و جوی ویدئو

ما در این آموزش به شما نحوه ساخت یک اپیلیکیشن جست و جوی ویدئو رو می دهیم.شما میتونید از این اپیلیکیشن برای جست و جوی فیلم های مورد نظر استفاده کنید.قبل از شروی کار شما باید در سایت TDMb ثبت نام کنید  تا یک کلید برای گسترش این اپیلیکیشن با استفاده از API آن بدهد پس از این کار کلید را در movieInfo.php  کپی کنید.

برای مشاهده لینک وارد شود

خوب کار را با نوشتن کد های HTML آغاز می کنیم.در این بخش ما هر چیزی را که نیاز داشته باشیم  اعم از کدهای jQueryو… را وارد می کنیم.

movieApp.html

<div id="page">

    <div id="logo">
        <div id="icon"></div>
        <div id="movieAppLabel"></div>
    </div>

    <div id="holder">
    	<form action="http://www.themoviedb.org/search" method="post" target="_blank">
            <fieldset>
            	<input type="text" id="movieName" name="search" />
            </fieldset>
        </form>
        <a href="#" class="button">Submit</a>
    </div>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script src="script.js"></script>

توجه داشته باشید که فرم به صفحه جست و جوی TMDb اشاره دارد.عنوان مورد جست و جو از طریق متدPOST که شامل نام فیلم است ارسال می شود.در آخر ما کدهای jQuery را وارد کردیم.ما از ویجت تکمیل خودکار jQuery UI برای نمایش لیست فیلم های جست و جو شده استفاده می کنیم که شما میتونید در زیر آن را مشاهده کنید.

<input class="ui-autocomplete-input"/>
<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all">
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 1</a>
  </li>
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 2</a>
  </li>
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 3</a>
  </li>
</ul>

PHP

وقتی شما نام فیلم را در textbox فرم می نویسید AJAX یک درخواست به moveInfo.php می فرستد.این اسکریپت درخواست جست و جو را به  TMDb’s API با استفاده از کلید مان می فرستد.این سرویس یک شی JSON متناسب با نام فیلم می فرستد.در زیر نحوه کار را می بینید

movieInfo.php​

/**
 *	Define your API key below. To obtain one, visit
 *	http://www.themoviedb.org/account/signup
 */

$api_key = '...';

// If the request was not issued by AJAX, or
// the search term is missing, exit:

if(!$_SERVER["HTTP_X_REQUESTED_WITH"] || !$_GET['term']){
    exit;
}

include 'tmdbAPI/TMDb.php';

$tmdb = new TMDb($api_key);

// Send a search API request to TMDb,
// and parse the returned JSON data:

$json = json_decode($tmdb->searchMovie($_GET['term']));

$response = array();

$i=0;
foreach($json as $movie){

    // Only movies existing in the IMDB catalog (and are not adult) are shown

    if(!$movie->imdb_id || $movie->adult) continue;
    if($i >= 8 ) break;

    // The jQuery autocomplete widget shows the label in the drop down,
    // and adds the value property to the text box.

    $response[$i]['value'] = $movie->name;
    $response[$i]['label'] = $movie->name . ' <small>(' . date('Y',strtotime($movie->released)).')
​       </small>';
    $i++;
}

// Presenting the response as a JSON object:

echo json_encode($response);

از شانس ما یک کلاس PHP به این منظور وجود دارد که تمام دستکاری های لازم  را انجام می دهد. و فقط ما باید آن را در صفحه وارد کنیم و آن را با استفاده از کلید خود گسترش دهیم.تمام عنوان های جست و جو شده در[‘GET[‘TERM_$ در دسترس است.با استفاده از این ما متد ()searchMovie را فراخوانی میکنیم.شما میتونید در زیر مشاهده کنید

[{
    "score": 8.750235,
    "popularity": 3,
    "translated": true,
    "adult": false,
    "language": "en",
    "name": "The Hitchhiker's Guide to the Galaxy",
    "alternative_name": "The Hitchhikers Guide to the Galaxy",
    "movie_type": "movie",
    "id": 7453,
    "imdb_id": "tt0371724",
    "url": "http://www.themoviedb.org/movie/7453",
    "rating": 6.8,
    "certification": "PG",
    "overview": "Mere seconds before the Earth is to be demolished by an alien construction crew,
 Arthur Dent is swept off the planet by his friend Ford Prefect, a researcher penning a
 new edition of \"The Hitchhiker's Guide to the Galaxy.\"",
    "released": "2005-04-20",
    "posters": [{
        "image": {
            "type": "poster",
            "size": "original",
            "height": 1000,
            "width": 675,
            "url": "http://hwcdn.themoviedb.org/posters/16e/
              ۴bcc96cd017a3c0f2600016e/the-hitchhiker-s-guide-to-the-galaxy-original.jpg",
            "id": "4bcc96cd017a3c0f2600016e"
        }
    }],
    "version": 22,
    "last_modified_at": "2010-07-19 22:59:02"
}]

jQuery

تمام کدهای jQuery که ما در این پلاگین استفاده کردیم شما در زیر میتونید مشاهده کنید

script.js

$(document).ready(function(){

    // Caching the movieName textbox:
    var movieName = $('#movieName');

    // Defining a placeholder text:
    movieName.defaultText('Type a Move Title');

    // Using jQuery UI's autocomplete widget:
    movieName.autocomplete({
        minLength	: ۵,
        source		: 'movieInfo.php'
    });

    $('#holder .button').click(function(){
        if(movieName.val().length && movieName.data('defaultText') != movieName.val()){
            $('#holder form').submit();
        }
    });
});

// A custom jQuery method for placeholder text:

$.fn.defaultText = function(value){

    var element = this.eq(0);
    element.data('defaultText',value);

    element.focus(function(){
        if(element.val() == value){
            element.val('').removeClass('defaultText');
        }
    }).blur(function(){
        if(element.val() == '' || element.val() == value){
            element.addClass('defaultText').val(value);
        }
    });

    return element.blur();
}

برای تکمیل خودکار ما فقط باید متد  ()autocomplete ​را فراخوانی کنیم که مهمترین بخش آن  minLength و source است.در این جا یک پاسخ نمونه است که توسط movieInfo.php برگشت داده شده است.

[{
    "value": "Hachiko: A Dog's Story",
    "label": "Hachiko: A Dog's Story <small>(2009)<\/small>"
},
{
    "value": "Teenage Hitch-hikers",
    "label": "Teenage Hitch-hikers <small>(1975)<\/small>"
},
{
    "value": "The Hitchhiker's Guide to the Galaxy",
    "label": "The Hitchhiker's Guide to the Galaxy <small>(2005)<\/small>"
},
{
    "value": "The Hitch-Hiker",
    "label": "The Hitch-Hiker <small>(1953)<\/small>"
}]

ودر آخر هم کدهای css را می نویسیم که به دلیل سادگی نیاز به توضیح ندارند.

styles.css

#page{
    width:600px;
    margin:150px auto 0;
}

/* Logo */

#logo{
    width:380px;
    position:relative;
    height:90px;
    margin:0 auto;
}

#icon{
    width:80px;
    height:86px;
    background:url('img/icon.png') no-repeat;
    float:left;
}

#movieAppLabel{
    width:268px;
    height:58px;
    background:url('img/logo_txt.png') no-repeat;
    position:absolute;
    right:0;
    top:18px;
}

/* The Search Box & Holder */

#holder{
    width:530px;
    height:145px;
    background:url('img/holder.png') no-repeat center center;
    margin:30px auto;
    position:relative;
}

#holder fieldset{
    position:absolute;
    top:52px;
    left:40px;
    border-bottom:1px solid #fff;
}

#holder input{
    font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
    border:none;
    border-bottom:1px solid #bbb;
    background:none;
    color:#8D8D8D;
    font-size:20px;
    padding:4px 0;
    width:250px;
    text-shadow:1px 1px #fff;
    outline:none;
}

fieldset{
    border:none;
}

/* The Blue Button */

a.button{
    background:url('img/buttons.png') no-repeat;
    width:105px;
    height:37px;
    position:absolute;
    top:52px;
    right:42px;
    text-indent:-9999px;
    overflow:hidden;
    border:none !important;
}

a.button:hover{
    background-position:left bottom;
}

/* Styling the markup generated by the autocomplete jQuery UI widget */

ul.ui-autocomplete{
    width:250px;
    background-color:#f5f5f5;
    border:1px solid #fff;
    outline:1px solid #ccc;
}

ul.ui-autocomplete li{
    list-style:none;
    border-bottom:1px solid #e0e0e0;
    border-top:1px solid #fff;
}

ul.ui-autocomplete li:first-child{
    border-top:none;
}

ul.ui-autocomplete li:last-child{
    border-bottom:none;
}

ul.ui-autocomplete li a{
    color:#999;
    border:none !important;
    text-decoration:none !important;
    padding:10px 17px;
    display:block;
}

#ui-active-menuitem{
    background-color:#fff;
    color:#666;
    cursor:pointer;
}

پایان

+31
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


6 − = پنج

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>