تطبيق أفلام ب jquery mobile

تطبيق أفلام ب jquery mobile


فهاد التطبيق الثاني من سلسلة jquery mobile غادي نشوفوا كيفاش نقادو واحد التطبيق كيف قلنا فالفيديو لي كنسترجع به أفلام وكنبحث به أيضا على أفلام باستخدام omdb api لي غادي تمكنا باش نديرو البحث على الأفلام لي بغينا فيلا مكنتيش كتعرف jquery شوف الدورات ديال المبتدئين.

نظرة سريعة بالفيديو

1- إنشاء مشروع جديد وإضافة الملفات الرئيسية

فكيف شفنا التطبيق السابق منبعد تحميل thème لي اختاريتي غادي تفتح الملف index.html فالمتصفح ديالك منبعد غادي نزيدو عليه تغييرات فأول حاجة :
- كنزيد الصفحة الرئيسية لي كنعطيها ل id home منبعد كنزيد ل header ديال ل page ثم عندي data-role main لي فيها الفورم ديال البحث والقائمة لي عطيتها id movies فين غادي يتعرضوا الأفلام لي غادي نسترجع.
- منبعد عندي ال footer لي تقدر تزيد فيه لي بغيتي.
الكزد لي زدنا هو :

                                <html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Online Movies</title>
	<link rel="stylesheet" href="themes/omdb-theme.min.css" />
	<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
	<link rel="stylesheet" href="themes/style.css">
	<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
	<div data-role="page" id="home">
		<div data-role="header">
			<h1>Online Movies</h1>
		</div>
		<div data-role="main" class="ui-content">	
			<form id="search">
				<div class="ui-field-contain">
					<input type="text" data-type="search" name="searchField" id="searchField" placeholder="Recherche">
				</div>
			</form>
			<ul id="movies" class="p-2" data-role="listview">
			</ul>
			<a href="#" class="ui-btn ui-shadow ui-corner-all ui-icon-arrow-r ui-btn-icon-right" id="next">Suivant</a>
		</div>
		<div data-role="footer" class="center">
			<p>DCoding © 2018</p>
		</div>
	</div>
	<script src="js/main.js"></script>
</body>
</html>
                            

2- إضافة الكود الخاص بعرض الأفلام

منبعد كنزيد ملف main.js لي راه عندي فالملف index.html لي فيه الكود jquery باش نسترجع الأفلام فعندي أولا :
- كنزيد variable page لي غادي تكون عندها القيمة واحد بها باش كنعرض الصفحة الموالية.
- من بعد ملي document كيتشارجا و مني كندير للفورم submit كنسترجع القيمة لي دخل المستخدم وكنرسلها لل fonction getSearchMovies.
- ثم كاين ل fonction getMovies لي كتمكن من استرجاع الأفلام فأول حاجة كناخد ل url لي par défaut حددت ل s لي هي search يعني علاش كنبحث ف sam تقدر تدير اي حاجة بغيتي وكنزيد ل api key ديالي.
منبعد كنخدم ب getJSON.$ لي كتخد ل url وكتسترجع الأفلام لي كنزيدهم ف variable movies لي منبعد كنخدم ب each.$ لي بحال foreach ديال php.
ثم كنعرض الأفلام ف li لي منبعد كنزيدها ل ul لي عطيتها id movies.
- منبعد عندي ل fonction getSearchMovies لي كتدير نفس الشي فقط كتغير لقيمة ديال البحث من sam لداكشي لي دخلنا فالحقل.
- ملي كنضغط على شي فلم كنسترجع ل id ديالو لي كيترسل ل fonction getMovieId ولي كتخزنوا ف session storage وكنتوجه المستخدم للصفحة singleMovie.html لي كتعرض الفلم لي اختارينا ولي غادي نزيدوها من بعد.
- ثم عندي ل fonction getSingleMovie لي كتاخد ل id ديال الفيلم لي كنسترجعوا من session storage منبعد كنزيد ل url لي كيمكن من البحث على فيلم بل id ديالو فهادشي كامل راه كاين فل api وفالملف  singleMovie.html غادي يكونوا عندنا جوج ديال les ids واحد movieTopDetails لي غادي يتعرضوا فيه الصورة والعنوان ديال الفيلم والثاني  movieMoreDetails لي غادي تكون liste كيتعرضوا فيها التفاصيل الأخرى.
- ثم عندي الرابط لي كيمكن من التوجه للصفحة الموالية ملي كنضغط على ل bouton suivant ولي كناخد ل variable page كنزيد عليها واحد وكنعطيها لرابط ديال ل pagination.
فيلا مكنتيش كتعرف jquery شوف الدورات ديال المبتدئين.
الكود لي زدنا هو :

                                let page = 1;
$(document).ready(function(){
    getMovies();
    $('body').on('submit','#search',function(e){
        e.preventDefault();
        let searchField = $('#searchField').val();
        getSearchMovies(searchField);
    });
});
function getMovies(){
    const url = "http://www.omdbapi.com/?s=sam&apikey=70ac4e87";
    $.getJSON(url,function(data){
        let movies = data.Search;
        let output = '';
        $.each(movies,function(index,movie){
            output+=`
                <li>
                    <a onclick="getMovieId('${movie.imdbID}')">
                        <img src="${movie.Poster}" alt="">
                        <h3>${movie.Title}</h3>
                        <p><small>${movie.Year}</small></p>
                    </a>
                </li>
            `;
        });
        $('#movies').html(output).listview('refresh');
    });
}
function getSearchMovies(searchField){
    $('#movies').html('');
    const url = "http://www.omdbapi.com/?s="+searchField+"&apikey=70ac4e87";
    $.getJSON(url,function(data){
        let movies = data.Search;
        let output = '';
        $.each(movies,function(index,movie){
            output+=`
                <li>
                    <a onclick="getMovieId('${movie.imdbID}')">
                        <img src="${movie.Poster}" alt="">
                        <h3>${movie.Title}</h3>
                        <p><small>${movie.Year}</small></p>
                    </a>
                </li>
            `;
        });
        $('#movies').html(output).listview('refresh');
    });
}
function getMovieId(movieID){
    sessionStorage.setItem('movieID',movieID);
    $.mobile.changePage('singleMovie.html');
}
//before show movie details page
$(document).on('pagebeforeshow','#movie',function(){
    let movieID = sessionStorage.getItem('movieID');
    getSingleMovie(movieID);
});
function getSingleMovie(movieID){
    const url = "http://www.omdbapi.com/?i="+movieID+"&apikey=70ac4e87";
    $.getJSON(url,function(movie){
        console.log(movie);
        let movieTopDetails = `
            <h3 class="center">${movie.Title}</h3>
            <img src="${movie.Poster}" alt="">
        `;
        $('#movieTopDetails').html(movieTopDetails);
        let movieMoreDetails = `
            <li>
                <strong>Genre:</strong> ${movie.Genre}
            </li>
            <li>
                <strong>Sortie:</strong> ${movie.Year}
            </li>
            <li>
                <strong>Durée:</strong> ${movie.Runtime}
            </li>
            <li>
                <strong>IMDB score:</strong> ${movie.imdbRating}
            </li>
            <li>
                <strong>Acteurs:</strong> ${movie.Actors}
            </li>
            <li>
                <strong>Réalisateur:</strong> ${movie.Director}
            </li>
        `;
        $('#movieMoreDetails').html(movieMoreDetails).listview('refresh');
    });
}
$('#next').on('click',function(){
    page += 1;
    if($('#searchField').val() == ""){
        const url = "http://www.omdbapi.com/?s=sam&apikey=70ac4e87&page="+page;
        $.getJSON(url,function(data){
            let movies = data.Search;
            let output = '';
            $.each(movies,function(index,movie){
                output+=`
                    <li>
                        <a onclick="getMovieId('${movie.imdbID}')">
                            <img src="${movie.Poster}" alt="">
                            <h3>${movie.Title}</h3>
                            <p><small>${movie.Year}</small></p>
                        </a>
                    </li>
                `;
            });
            $('#movies').html(output).listview('refresh');
        });
    }else{
        $('#movies').html('');
        let searchField = $('#searchField').val();
        const url = "http://www.omdbapi.com/?s="+searchField+"&apikey=70ac4e87&page="+page;
        $.getJSON(url,function(data){
            let movies = data.Search;
            let output = '';
            $.each(movies,function(index,movie){
                output+=`
                    <li>
                        <a onclick="getMovieId('${movie.imdbID}')">
                            <img src="${movie.Poster}" alt="">
                            <h3>${movie.Title}</h3>
                            <p><small>${movie.Year}</small></p>
                        </a>
                    </li>
                `;
            });
            $('#movies').html(output).listview('refresh');
        });
    }
});
                            

3- إضافة الصفحة الخاصة بعرض فلم

منبعد كنزيد ملف جديد سميه singleMovie.html لي فيه غادي تعرض المعلومات الخاصة بفيلم ضغطنا عليه فعندي الرابط لي كيردني للصفحة الرئيسية منبعد عندي كيف قلنا قبل جوج ديال les ids واحد movieTopDetails لي غادي يتعرضوا فيه الصورة والعنوان ديال الفيلم والثاني  movieMoreDetails لي غادي تكون liste كيتعرضوا فيها التفاصيل الأخرى.
الكود ديال الملف هو :

                                <html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Online Movies</title>
	<link rel="stylesheet" href="themes/omdb-theme.min.css" />
	<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
    <link rel="stylesheet" href="themes/style.css">
	<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
	<div data-role="page" id="movie">
		<div data-role="header">
            <h1>Online Movies</h1>
            <a href="index.html" data-icon="back"></a>
		</div>
		<div data-role="main" class="ui-content">
            <div class="ui-body ui-body-a ui-corner-all">
                <div id="movieTopDetails"></div>
                <br>
                <ul class="p-2" data-role="listview" id="movieMoreDetails"></ul>
            </div>	
        </div>
        <div data-role="footer" class="center">
            <p>DCoding © 2018</p>
        </div>
	</div>
	<script src="js/main.js"></script>
</body>
</html>
                            

4- إضافة الملف STYLE.CSS

ف dossier css زيد ملف جديد سميه style.css لي فيه غادي يكون كود css زدتو باش قاديت بعض العناصر فالملف الرئيسي فيلا مكنتيش كتعرف css شوف الدورات ديال المبتدئين.
الكود لي زدنا هو :

                                    .center{
    text-align: center;
}
.p-2{
    padding: 8px;
}
#movies li{
    border: 1px solid #c3c3c3;
    margin-bottom: 5px;
}
#movieMoreDetails{
    margin-top: 10px;
}
                                


بحث في الموقع


إشترك للتوصل بالجديد