ط¯ط±ظˆط³ طھط¹ط§ظ…ظ„ ظ…ط¹ ط¥ط·ط§ط± ط§ظ„ط¹ظ…ظ„ CodeIgniter ط§ظ„ط¯ط±ط³ ط§ظ„ط«ط§ظ„ط«





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

اليوم راح نعمل تصميم بسيط ونعمل 3 صفحات ونرسل بعض المتغيرات

حتا يكون عندنا شي بسيط نشرح طريقة عليه



راح نستخدم أطار عمل bootstrap في تصميم أسرع لنا

نحمل الملف من موقعهم

Bootstrap

ونحمل مكتبة جكويري

jQuery

حتا أشرح طريقة ندمجهم في العمل وأستخدامهم



فك الضغط عن bootstrap ونقل الملفات الى المشروع



الان راح نحتاج ملف مساعد حتا يعطينا رابط الموقع

ندخل على ملف

application\config

نفتح ملف autoload.php



URL Helper : CodeIgniter User Guide

الان نستطيع عرض رابط الموقع كذه

base_url()

مثال يعطيك

http://localhost/dzbatna



الان نعمل تصميم بسيط ونقسم التصميم

الى head و body و footer

ندخل ملف \views ونعمل 3 ملفات



نعمل ملف head.php
رمز PHP:
<code style="white-space:nowrap"> <code> <!DOCTYPE html>
<head>
<meta charset="utf-8">
<title><?php echo $title ?></title>
<!-- أضافة سي أس أس و الجكويري -->
<script src="<?php echo base_url('js/jquery.js');?>"></script>
<link href=<?php echo base_url('css/bootstrap.css');?> rel="stylesheet">
<script src="<?php echo base_url('js/bootstrap.js');?>"></script>
<style> *{direction:rtl;}</style>
</head>

<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">TRAIDNT</a>
<div class="nav-collapse collapse">
<p class="navbar-text pull-right">
اذا كنت عضو <a href="#myModal" role="button" data-toggle="modal"
class="navbar-link">تسجيل الدخول</a></p>
<ul class="nav">
<li><a href="<?php echo base_url('index.php/test/contact');?>"> راسلنا</a></li>
<li><a href="<?php echo base_url('index.php/test/about');?>">معلومات عنا</a></li>
<li class="active"><a href="<?php echo base_url('index.php/test');?>">الرئيسيه</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>

<!-- تسجيل الدخول -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close"data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel"> تسجيل الدخول </h3>
</div>
<div class="modal-body">
<p>
<fieldset>
<label>العضوية</label>
<input type="text" placeholder="Type something…">
<label>الباسورد</label>
<input type="text" placeholder="Type something…">
</fieldset>
</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary">الدخول</button>
</div>
</div>
</code> </code>

نعمل ملف body.php

رمز PHP:
<code style="white-space:nowrap"> <code>
<div class="container-fluid">
<
div class="row-fluid">
<
div class="span11">
<
div class="hero-unit">
<
h1>أهلا وسهلأ</h1>
<
p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<
p><a href="#" class="btn btn-primary btn-large">Learn more &raquo;</a></p>
</
div>
<
div class="row-fluid">
<
div class="span4">
<
h2>Heading</h2>
<
p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<
p><a class="btn" href="#">View details &raquo;</a></p>
</
div><!--/span-->
<
div class="span4">
<
h2>Heading</h2>
<
p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<
p><a class="btn" href="#">View details &raquo;</a></p>
</
div><!--/span-->
<
div class="span4">
<
h2>Heading</h2>
<
p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<
p><a class="btn" href="#">View details &raquo;</a></p>
</
div><!--/span-->
</
div><!--/row-->
<
div class="row-fluid">
<
div class="span4">
<
h2>Heading</h2>
<
p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<
p><a class="btn" href="#">View details &raquo;</a></p>
</
div><!--/span-->
<
div class="span4">
<
h2>Heading</h2>
<
p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<
p><a class="btn" href="#">View details &raquo;</a></p>
</
div><!--/span-->
<
div class="span4">
<
h2>Heading</h2>
<
p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<
p><a class="btn" href="#">View details &raquo;</a></p>
</
div><!--/span-->
</
div><!--/row-->
</
div><!--/span-->
</
div><!--/row-->
</code> </code>

و ملف footer.php
رمز PHP:
<code style="white-space:nowrap"> <code> <hr>

<
footer>
<
p>&copy; Company 2014</p>
</
footer>

</
div><!--/.fluid-container-->

</
body>
</
html>
</code> </code>



الان نروح على controllers

نحمل التصميم الي عملنا

رمز PHP:
<code style="white-space:nowrap"> <code> $this->load->view('head');
$this->load->view('body');
$this->load->view('footer');
</code> </code>

الان المتغيرات حتا نضيف المتغيرات نضعها في مصفوفه مثال

رمز PHP:
<code style="white-space:nowrap"> <code> $data = array(
'title' => 'My Title',
'heading' => 'My Heading',
'message' => 'My Message'
);
</code> </code>

الان في التصميم لعرض المتغير يكون أسم المتغير على المفتاح الخاص فيه
مثال على المصفوفه الي فوق

رمز PHP:
<code style="white-space:nowrap"> <code>
$title
$heading
$message
</code> </code>

راح أعمل صفحتين مثال نرجع ملف \views

ونعمل about.php
رمز PHP:
<code style="white-space:nowrap"> <code> <div class="container-fluid">
<
div class="row-fluid">
<
div class="span11">
<
div class="hero-unit">
<
h1>معلومات عنا</h1>
<
p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<
p><a href="#" class="btn btn-primary btn-large">Learn more &raquo;</a></p>
</
div>

</
div><!--/span-->
</
div><!--/row-->
</
div><!--/span-->
</
div><!--/row-->
</code> </code>

و

contact.php

رمز PHP:
<code style="white-space:nowrap"> <code> <div class="container-fluid">
<
div class="row-fluid">
<
div class="span11">
<
div class="hero-unit">
<
h1>راسلنا</h1>
<
p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<
p><a href="#" class="btn btn-primary btn-large">Learn more &raquo;</a></p>
</
div>

</
div><!--/span-->
</
div><!--/row-->
</
div><!--/span-->
</
div><!--/row-->
</code> </code>

نرجع الى controllers

الان لا تحتاج تعمل الهيدر header والفوتر احنا عملناهم خلاص فقط نغير الجسم

مثال

رمز PHP:
<code style="white-space:nowrap"> <code> $this->load->view('head',$data);
$this->load->view('about');
$this->load->view('footer');
</code> </code>

ونرسل المتغيرات الى تصميم كذه ,$data

[PHP] رمز PHP:
<code style="white-space:nowrap"> <code> $this->load->view('head',$data);
</code> </code>

يصبح عندنا الكلاس


رمز PHP:
<code style="white-space:nowrap"> <code> <?php
## هذه السطر خاص للحماية
if ( ! defined('BASEPATH')) exit('No direct script access allowed');

// بداء الكلاس
class test extends CI_Controller {

## بداء الفنكشن
public function index()
{
## وضع المتغيرات في مصفوفه
$data = array(
'title' => 'My Title',
'heading' => 'My Heading',
'message' => 'My Message'
);
## نحمل صفحة الفيو الي عملناها
$this->load->view('head');
$this->load->view('body');
$this->load->view('footer');
}

## صفحة معلومات عنا
public function about()
{
## وضع المتغيرات في مصفوفه
$data = array(
'title' => 'My Title',
'heading' => 'My Heading',
'message' => 'My Message'
);
## نحمل صفحة الفيو الي عملناها
$this->load->view('head',$data);
$this->load->view('about');
$this->load->view('footer');
}

## صفحة الاتصا بنا
public function contact()
{
## وضع المتغيرات في مصفوفه
$data = array(
'title' => 'My Title',
'heading' => 'My Heading',
'message' => 'My Message'



);
## نحمل صفحة الفيو الي عملناها
$this->load->view('head',$data);
$this->load->view('contact');
$this->load->view('footer');
}

}
## نهاية الكلاس
</code> </code>

الناتج التصميم











ثلاث صفحات مع عرض تسجيل الدخول



الدرس مفصل الرابع التعامل مع قاعد البيانات وعرضها في التصميم











©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©