ويب

برمجة لوحة التحكم – الجزء 4

بعدما انتهينا من برمجة لوحة التحكم الجزء 1 || برمجة لوحة التحكم  الجزء 2 ||  برمجة لوحة التحكم – الجزء 3

ولدينا الان صفحة /movies بـ GET ترجع لنا بصفحة بيضاء لانه لا يوجد retrurn لأى view وهذا ما سنفعله اليوم بعدما اتفقنا ان خطوات انشاء صفحة تكون كالتالى

قمنا بعمل الخطوة الأولى والثانية فى التدوينة السابقة  والان نقوم بالخطوة الثالثة وهى إنشاء ملف الـ view الذى يحتوى على شكل الصفحة .

إنشاء ملف الـ View

وهى صفحة الـ movies

سنقوم الان بإنشاء مجلد اسمه movies تحت ال views بداخل مجلد الـ resources حتى نضع به ملفات ال views الخاص بالـ movie

 

بداخل المجلد movies نقوم الان بإنشاء ملف الرئيسية وسنسميه index.blade.php اسم الملف index و blade هو امتداد خاص بـ laravel والـ blade هو محرك للقوالب تقوم laravel باستخدامه لعدم تكرار الكود اى قوالب جاهزه تكتب ويعاد استخدامها داخل الملفات مرة اخرى ب@ ولا داعى للتطرق للتفاصيل لان هذا ليس موضوعنا هنا نحن فقط نتعلم كيفية عمل لوحة التحكم واذا اردت القاء نظرة والتعمق اكثر فى laravel blade اضغط هنا

حسنا الان نريد عندما يقوم المستخدم بالذهاب الى /movies ان يرى list من الـ movies الموجودة بالـ database نقوم اولا بإنشاء ملف داخل المجلد movies باسم index.blade.php يمكنك اختيار اى اسم اخر غير index لكن المتعارف عليه والشائع ان تسميه index لانه سيعرض كل الموجود بالداتا بيز

بعد إنشاء الملف قم بنسخ كود الـ home والصقه بداخل ال index وغير التالى

 

نذهب الان الى ملف الـ controllers الخاص بالـ movie والمسمى MoviesController  ثم الى الميثود او الفانكشن index والتى تنادى عند عمل GET / movies ونقوم بعمل retrun view كالتالى

/movies/index وهنا ال movies هو اسم المجلد الموجود بالـ views والـ index هو اسم الملف وطبعا بدون الامتدادا ولا تنسى السيمى كولن 😀

قم الان بالذهاب للمتصفح واستدعاء الرابط /movies

 

جيد جدا لقد قام بعرض صفحة index الموجودة بداخل مجلد ال movies الموجود بداخل ال views طبقا لما كتبنا .

الـ Blade Templates

الان نلقى نظرة على ملف الـ index لنقوم بشرح الكود قليلا ليصبح مفهوم أكثر

السطر الأول

@extends('adminlte::page')

معناه ان هذه الصفحة هى عباره عن امتداد لقالب adminlte وهى مجرد page فى لوحة التحكم فيمكن ان يكون لدينا عدة قوالب ونريد ان تكون هذه الصفحة امتداد من قالب اخر سواء جاهز او قمنا نحن بعمله لكن بشكل عام سنستخدم هذه الصفحة .

السطر الثالث

@section('title','Movies')

اى ان العنوان الخاص بالصفحة فى المتصفح سيكون Movies طبعا يوجد اعدادات مسبقة تم عملها باستخدام القالب لتمكننا من كتابة كلمة title بهذا الشكل فيقوم باخذها ووضعها ضمن صفحة html العامة بمكان معين فتظهر كعنوان وهو موضوع لا نريد التطرق اليه لانه سيطول شرحه
كذلك السطر ال5- 7 والسطر 9 -10 لكن الفرق ان القسم يوجد له سطر اغلاق وهو @stop اى انك تضع الكود الخاص بهذا القسم داخل @section و@stop تشبه block من الكود .

الان نعود لل Controller لنقوم بالاستعلام عن ال movies وإرسالها للصفحة لعرضها لكن قبل ذلك قمت بالدخول الى ال phpmyadmin واضافة مجموعة من ال movies يدويا

نذهب الان لملف الـ Controller  ثم نضيف السطر التالى $items= Movie::all() وبعد ذلك قوم باضافة parameter ثان للميثود view وبالاضافة الى باراميتر مسار الملف الخاص بال view سنضيف بارميتر تمرير البيانات وسنستخدم الميثود compact ونمرر لها اسم المتغير فى السطر السابق لها وهو items كالتالى

ببساطة لدينا Model اسمه Movie وهو يمثل جدول الـ movies فى قاعدة البيانات وموجود بداخل مجلد ال app واأنشأناه سابقا
وهنا استخدمناه واستدعينا الـ static method والمسماه all() التابعة لـ laravel وهى تقوم بجلب الداتا من جدول الداتا بيز وتخزينها فى متغير باسم items .
بعدها سطر الـ retrun العادى لكن اضفنا باراميتر ثان به ميثود اسمها compact نعطيها براميتر اسم المتغير المرسل لكى نستيطع استخدامه بداخل ملف ال view المسمى index كما سنرى الان
نعود للملف index.blade.php  ونقوم بكتابة كود for loop يقوم بطباعة اسم كل فيلم كالتالى

الـ @foreach والـ @endforeach  خاصين بالـ blade ويعتبر اختصار للـ foreach العادية الخاصة ب php لكن بدلا من كتابة <?php واغلاق الوسم ?> وكتابة الكود بداخلها داخل كود ال html  توفر لنا الـ blade عدة اختصارات كالـ foreach والـ endforech كذلك الـ @if و @endif وبعض الاختصارات الاخرى لاحقا يمكننا التطرق اليها لذلك معنى الكود السابق لكل item فى قائمة الـ items سيتم تنفيذ الكود بداخل الـ @foreach والـ @endforeach وهنا الـ items هى الاتية من الـ compact من الـ controller كما فعلنا سابقا واضفناها كباراميتر ثان فانتقلت وصارت متاحة معنا فى الـ view
نقوم الان بفتح صفحة /movies فى المتصفح ونشاهد النتيجة .

مرحى ! الان لدينا قائمة من اسماء الافلام الموجودة بالداتا بيز لكن ماذا عن عرضهم بشكل أفضل ؟
قم بنسخ الكود التالى واستبدله بالكود الموجود بـ index.blade.php

@extends('adminlte::page')

@section('title', 'Movies')

@section('content_header')
    <h1>Movies</h1>
@stop

@section('content')

	<div class="row">
 		<div class="col-xs-12">
			<div class="box box-primary box-solid">
				<div class="box-header with-border">
					<h3 class="box-title">
						<span><i class="fa  fa-cubes"></i></span>
						<span> List All Movies</span>
					</h3>
				</div>

				<div class="box-body">
 					<table id="tbl-list" data-server="false" class="dt-table table table-striped table-bordered" cellspacing="0" width="100%">
						<thead>
						<tr>
							<th>ID</th>
              <th>Name</th>
							<th>Year</th>
							<th>Description</th>
              <th>Cast</th>
 						</tr>
						</thead>
						<tbody>
						@foreach ($items as $item)
							<tr>
								<td>{{$item->id}}</td>
                <td>{{$item->name}}</td>
                <td>{{$item->year}}</td>
                <td width="40%">{{$item->description}}</td>
                <td>{{$item->cast}}</td>
							</tr>
						@endforeach
						</tbody>
					</table>
				</div>

      </div>
		</div>
	</div>
@stop

 

نقوم الان باستدعاء /movies فى المتصفح لنشاهد النتيجة

جميل جدا الان ال sidebar الايسر حان الوقت لنقوم بتغيير القائمة

إضافة الصفحة للقائمة

ولفعل ذلك سنقوم بفتح الـ terminal وتنفيذ الامر التالى :

php artisan vendor:publish --provider="JeroenNoten\LaravelAdminLte\ServiceProvider" --tag=config

الان نذهب للملف /config/adminlte.php
ونقوم بتعديل عنوان لوحة التحكم كالتالى

 

وهنا الـ menu الخاصة بـ لوحة التحكم  فى الـ sidebar الايسر

نقوم بتعديلها لتصبح كالتالى :

    'menu' => [
        'MAIN NAVIGATION',
        [
            'text' => 'Blog',
            'url'  => 'admin/blog',
            'can'  => 'manage-blog',
        ],
        [
            'text'        => 'Home',
            'url'         => '/home',
            'icon'        => 'file',
             'label_color' => 'success',
        ],
        [
            'text'        => 'Movies',
            'url'         => '/movies',
            'icon'        => 'file',
            'label_color' => 'success',
        ],

    ],

 

والان نقوم بالحفظ ونشاهد النتيجة

 

جميل جدا الان قمنا بعرض قائمة الـ movies من الـ database وفى المقالة  القادمة سنتعلم كيفية الاضافة والتعديل والحذف من لوحة التحكم.

السابق
برمجة لوحة التحكم – الجزء 3
التالي
برمجة لوحة التحكم – الجزء 5

تعليق واحد

أضف تعليقا

  1. مرزوق السرحاني قال:

    السلام عليكم ورحمة الله وبركاته…….

    شكرا لك على الشرح الكامل المتكامل….توضيحك ووشرحك جدا راقي شكرا لك.

    الرجاء إكمال السلسة جدا استفدت منها ومتحمس اكملها كااامله.

    بإنتظار ردك : ).

اترك تعليقاً

This site uses Akismet to reduce spam. Learn how your comment data is processed.