php MySQL إنشاء مُدوّنة

تهييء الأرضية

آخر تحيين: 13-12-2015

تمرين : إضافة المواضيع للمدونة php mysql : التعامل مع التاريخ و الوقت


قبل البدء في برمجة تطبيقات موقعنا أو مدونتنا ، سنُهييء الأرضية أولا بما يلزمنا و سنُغطّي النقاط التالية :

  • إنشاء جدول في قاعدة البيانات ، لتخزين بيانات المدونة .
  • إنشاء ملف الموقع و الملفات التي سيضمها
  • صياغة هيكل و نمط الصفحة النموذجية للموقع "html5/css3"
  • ربط الإتصال بقاعدة البيانات

إنشاء جدول blog

إفتحوا phpMyAdmin . ثم قوموا بالولوج إلى قاعدة بياناتكم . سنستخدم قاعدة "test" . يمكنكم إستعمال أي إسم آخر . ثم أنشئوا جدولا بالشيفرة التالية .
إذا نسيتم طريقة إنشاء الجدول باستعمال شيفرة SQL . يمكنكم مراجعتها باتباع هذا الرابط

CREATE TABLE IF NOT EXISTS `blog` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `title` varchar(70) NOT NULL,
  `content` longtext NOT NULL,
  `author` varchar(40) NOT NULL,
  `creation_date` datetime NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 ;
title : عنوان الموضوع
content : محتوى الموضوع
author : الكاتب أو صاحب الموضوع
creation_date : تاريخ كتابة الموضوع
بالنسبة لحقل التاريخ ، إخترت datetime من باب الإستئناس للتعامل مع هذا النوع . يمكنكم استعمال طريقة unix timestamp في هذه الحالة يجب تغيير نوع الحقل إلى INT.
إذا لم تعتمدوا على شيفرة SQL أعلى ، و قمتم بإنشاء الجدول يدويّا . لا تنسوا إختيار ترميز UTF8 .

بعد إنشاء الجدول ، دعوه جانبا . سننتقل لإنشاء الملفات التي سنحتاجها

  • لهذا ، سننشيء ملفاً جديدا سنسميه مثلا "blog" ، هذا الملف سيضم جميع ملفات و مستندات المُدوّنة .
    داخل ملف "blog" . سنُنشيء الملفات الآتية :
  • ملف "includes" : سيضم الصفحات التي سنقوم بإقحامها .
  • ملف "img" : سيضم الصور المتعلقة بنمط الموقع
  • ملف "css" : سيضم صفحة الأنماط

خلاصة سيضم ملف blog حاليا ، الملفات الثلاث الآتية بالإضافة لصفحة الإستقبال "index.php" :

قم بحفظ الصورتين أسفله داخل ملف "img" ، ثم غير اسميهما كالتالي :



header.png

search.png

ملف includes

في هذا الملف سنضع الشيفرات المشتركة بين صفحات المدوّنة ، حتّى لا نعيد كتابتها و سنقوم بإقحامها باستعمال التعليمة require أو include .
هذا الملف سيضم 3 صفحات :

  • header.php : ستضم الشيفرات المتعلّقة برأس الصفحة
  • footer.php : ستضم الشيفرات المتعلّقة بقدم الصفحة
  • db-connection.php : ستضم شيفرة ربط الإتصال بقاعدة البيانات

سنبدأ بإنشاء الصفحات ، لذا سأعطيكم شيفرة كل صفحة .

db-connection.php

<?php 
try 
{
  $db = new PDO('mysql:host=localhost;dbname=test;charset=utf8', 'root', '');
} 
catch(PDOException $e)
{
  die('خطأ:'. $e->getMessage());
}
?>

لا تنسوا تغيير إسم القاعدة ، إذا سميتموها بإسم آخر غير "test" . نفس الشيء بالنسبة لإسم المستخدم "root" و كلمة المرور ""


header.php

<?php 
session_start();
$message = isset($_SESSION['message']) ? htmlspecialchars($_SESSION['message']) : '';
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <link href="/css/blog.css" type="text/css" rel="stylesheet">
</head>

<body>
<header id="header">
    <nav>
       <a href="/add-blog.php" class="box">إضافة موضوع</a>
    </nav>
    <h1>PHP <span>PDO</span><span>مدوّنتي</span></h1>
</header>
<section id="navigation">
    <div class="dropdown"><a href="#" onclick="show();">أنقر هنا لعرض و إخفاء الروابط</a></div>
    <nav id="drop">
        <a href="/">الإستقبال</a>
        <a href="">رابط 1</a>
        <a href="">رابط 2</a>
        <a href="">رابط 3</a>
        <form>
            <input type="text">
            <input type="submit" value="بحث">
        </form>
    </nav>
</section>

<section id="main">
<?php    
// ... عرض رسالة أثناء قيام العضو بعملية ما : كإضافة موضوع أو تغيير بياناته الشخصية
if($message != '') echo '<div class="flush center">'.$message.'</div>';
// تدمير جلسة الإشعار مباشرة بعد عرضه
$_SESSION['message'] = '';

أضفت متغير الجلسة $_SESSION['message'] ، سيفيدنا لاحقا لإشعار المستخدم بنجاحه في القيام بعملية ما ، مثل إضافة موضوع أو تعليق ...إلخ . نقوم بعرض المتغير ثم تدمير جلسته مباشرة .


footer.php

</section> <!-- [id=main] -->
<footer id="footer">
    <ul>
        <li><a href="/">الإستقبال</a></li>
        <li><a href="/">من نحن</a></li>
        <li><a href="/">إتصل بنا</a></li>
    </ul>
    <address>
        php pdo
        <a href="http://www.dorossinet.com/developpement-web/tutorials/php-mysql/php-mysql-beginner-create-blog">إنشاء مُدوّنة</a><br>
        <span>Copyright © <a href="http://www.dorossinet.com">dorossinet</a> 2015</span>
    </address>
</footer>
<script>
function show() {
    var el = document.getElementById("drop");
    if( el.style.display == 'block') {el.style.display = "none";} else {el.style.display = 'block';}
}
</script>
</body>
</html>

لقد أنهينا إنشاء الصفحات الثلاث داخل ملف "includes" . بهذا نكون قد سهلنا علينا الأمر ، كلما أردنا إضافة صفحة جديدة لمدونتنا ، نقوم بإقحام الصفحات السابقة .
ليس هناك مثال أحسن من إنشاء أول صفحة php على موقعنا ، لهذا أدعوكم لإنشاء صفحة الإستقبال مباشرة داخل ملف "blog" ، سنسميها "index.php" ثم ضعوا فيها الشيفرة التالية :


index.php

<?php 
require 'includes/header.php';
require 'includes/db-connection.php';

   echo '<h1>صفحة الإستقبال</h1>
   <p>مدونتي لازالت عبارة عن قوقعة فارغة ، لكنها ستتحسن عما قريب .</p>';

require 'includes/footer.php';
?>

قبل التجربة و عرض منتوجكم على المتصفح ، سنضيف آخر صفحة css لإعطاء النمط للمدونة .


ملف css

داخل هذا الملف سنُنشيء صفحة blog.css و نضع فيها الشيفرة التالية :

blog.css

/**
 * CREATE YOUR OWN BLOG
 * تعلم الخطوات الأساسية لإنشاء موقع أو منتدى
 *
 * المصدر
 * http://www.dorossinet.com/developpement-web/tutorials/php-mysql/php-mysql-beginner-create-blog
 *
 * Copyright (C) 2015 Boubker Hasni
 * Feel free to edit
 **/
address,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
html,body,h1,h2,h3{margin:0;padding:0;}
html{background: #e5e5e5;}

body 
{ 
    margin: 0 auto;
    color: #000;
    background: #fff;
    max-width: 980px;
    font-family: 'Arabic Transparent', 'Simplified Arabic', Greta, Helvetica, sans-serif;
}

a {
    color: #29acff;
    text-decoration: none;
}
a:hover, a:focus{ color: #000;}

hr {
    border-top: 1px solid #d7d7d7;
    margin: .5em 2em .2em;
    border-bottom: 0;
}

h1 {font-size: 1.5em;margin: 1em 0}
h2 {font-size: 1.3em;}
h3 {font-size: 1.2em}
h2, h3, h4 {margin: .3em 0}

a, label, #header span.member, .resume span, article.blog div span, .more a, .relative span, .button, .errors
{
    font-weight:bold
}

#header nav a, #footer ul li, label, article.resume h2, article.blog h2, article .details, .blog div.content, .blog div.sidebar, #navigation form input[type="submit"], .button, .relative span, .relative time, .inlineBlock
{
    display: inline-block
}

#header span:last-child, .sidebar span, .sidebar time, .avatar    {
    display: block;
}

#header {
    line-height: 1;
    padding: .5em 1.5em .5em;
    color: rgba(255,255,255,.7);
    height: 120px;
}

#header, #footer {background: #a2a2a1 url(/img/header.png)}
#header nav .box:hover, #footer .box:hover {box-shadow: inset 0 0 .5em #eee, 0 0 .3em #eee}

#header h1 {
    font-size: 2.2em;
    text-align: left;
    margin: 0;
    text-shadow: -1px -3px 0px rgba(0,0,0,.6)
}

#header span:last-child {
    margin-bottom: .5em;
    padding-left: 1em;
    font-weight: normal
}

#header h1 span{color: rgba(177,233,42,.9);}
#header h1 span:last-child{color: rgba(255,255,255,.3);}
#header nav{float: right}

#header nav img {max-width: 60px}

#header nav a {
    color: rgba(255,255,255,.7);
    padding: .5em .9em
}

#header nav a:hover, #header nav a:focus{color: #fff}

#main{padding:1em}

article{padding: 1em 0}
article.blog h2 {margin-right: 25%;color:#7b8339}
article.resume {padding: .8em .1em;}
article.resume, article .content, article .sidebar {font:  1.2em/1.3em 'Sakkal Majalla', 'Simplified Arabic', 'Traditional Arabic', 'Arabic Transparent', 'Arabic Fixed';}

article .details {
	padding-right:1em;
	font-size: .9em;
	color:grey;
	font-weight:normal
}

.details .button {padding: .2em 1.1em}
article.resume div:last-of-type {color: rgba(0, 0, 0, .7)}
article.resume .odd {padding: 0 .5em}
article.resume .even {padding: .8em}
article.odd, article.even {border-bottom: 5px solid #fff}

#footer {
    color: #fff;
    padding: .1em;
    margin-top: .5em;
    text-align: center;
    font-size: .9em
}
#footer ul li {padding-left:2.2em}
#footer a {font-weight:normal}
#footer ul li a {color: #b1e92a;font-weight:normal}
#footer address {font: 11px/20px sans-serif}
#footer address a {color: #7fffd4}
#footer a:hover {color: #f8f8f8}

#navigation, #navigation nav a.active {
    background: #ddd;
    color: #111
}
#navigation nav {
    position: relative;
    overflow: hidden;
    display: table;
    background: #ccc;
    box-shadow:0 1px 3px rgba(0,0,0, .5)
}
#navigation nav a {width:160px}
#navigation form {width:248px}

#navigation nav a, #navigation form {
    display: table-cell;
    padding: .2em .5em;
    text-align: center;
    color: rgba(179, 252, 3, .7);
    font: normal 1.1em/1.3em Andalus;
    border-right: 1px solid #5d5d5d;
    border-left: 1px solid #929292;
    border-bottom: 1px solid #898989;
    background-image: linear-gradient(to top, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color: #aaa
}

#navigation form input[type="text"] { 
    width: 108px;
    height: 20px;
    margin-top: 8px;
    border: none;
    padding: .1em .4em 0;
    margin: 0;
    margin-left: .1em;
    color: #eee;
    border-radius:10px;
    background-image: url(/img/search.png), -webkit-gradient(linear, left bottom, left top, color-stop(0, #7c7c7c), color-stop(0.5, #6f6f6f), color-stop(0.51, #808080), color-stop(1, #909090));
    background-image: url(/img/search.png), -moz-linear-gradient(center bottom, #7c7c7c 0%, #6f6f6f 50%, #808080 51%, #909090 100%);
    background-image: url(/img/search.png), linear-gradient(to top, #7c7c7c 0%, #6f6f6f 50%, #808080 51%, #909090 100%);
    background-repeat: no-repeat;
    background-color:#6E6E6E;        
    -moz-box-shadow: inset 0 2px 1px 1px #363636;
    -webkit-box-shadow: inset 0 2px 1px 1px #363636;
    box-shadow: inset 0 2px 1px 1px #363636
}

#navigation form input[type="submit"] {
    font-family:"Arabic Transparent";
    cursor: pointer
}

#navigation nav a:hover,#navigation nav a:focus {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
    background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
    background-image: linear-gradient(to top, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
    background-color:#383838;
    box-shadow: inset 0 0 5px 5px #535353;
    color:#fff
}

.dropdown {display:none; padding: .3em .8em}

article .content {
    width : 72%;
    padding: .5em .6em;
    text-indent: 2em;
    line-height: 1.5em;
    color: #536186;
	border-left: 1px solid #eee
}

article .sidebar {
    width : 20%;
    vertical-align: top;
    padding: 1em .2em .4em 0;
    color: #858686;
    font-size: 1em;
}

article .sidebar img {margin: .8em auto}
article .sidebar span {font-size: 1.1em;}
article .sidebar time {margin: .5em 0;}
.sidebar ul {padding: .3em .3em .3em 0;text-align:right;list-style-type: none}
article .sidebar h3, article .sidebar span {padding: .3em .1em;background: #81d01b; color: #fff}

.box {
    padding: .5em .8em;
    border-radius: 0.8em;
    box-shadow: inset 0 0 .3em silver, 0 0 .1em silver;
    border-width: .1em
}

.button {
    background:linear-gradient(to bottom, #ddd 5%, #f9f9f9 100%);
    background-color:#ddd;
    border:1px solid #dcdcdc;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    border-radius:6px;
    font-family: 'Arabic Transparent';
    cursor:pointer;
    color:#777;
    padding:.4em 1em;
    text-decoration:none
}

.disabled {cursor:default}

form.box {padding: 16px}
form.box:hover {
    border-color:rgba(69,169,255,.6);
    box-shadow:inset 0 0 .2em rgba(105,194,255, .9)
}
form input[type="submit"].button { padding: .5em .8em;margin-right: .5em}
fieldset {border-radius: .5em;padding: 1em;}
legend {
    padding: .2em 1em;
    border:1px solid #aaa;
    border-radius: .2em;
    box-shadow:0 0 .5em rgba(0,0,0, .4);
    font-size: 1.2em;
	background-color: #fff
}
.form-item {
	background-color: #eee;
	border-bottom: 0;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
}
.form-submit {background-color: #d3dce3;
    border-top-left-radius :0;
    border-top-right-radius :0;
}
label { text-align:right;min-width: 120px;padding-top:0.5em; margin-bottom: 5px; vertical-align:top}
#form {padding: .8em .5em 2em 1em;width:80%;margin: 0 auto}
#form input, #form textarea{width:69%}
#form input[type="text"], #form input[type="email"], #form input[type="password"],#form input[type="submit"] { line-height: 1.3em; min-height: 2em; padding: 1px 11px}
#form textarea {line-height: 20px; height: 12em; padding:16px 11px;margin-top: 7px;}
#form input, #form textarea {border:1px solid silver}
#form input[type="submit"] {display:block;margin-right: 135px; line-height: 26px; font-size: 20px; min-height: 26px}

#form ul li { color: #ff0000; margin-bottom: 5px}
#form h2 {color:gray; text-align: center}

#form input:hover:not([type="submit"]), #form input:focus, #form textarea:hover, #form textarea:focus {
    border-color:rgba(69,169,255,.6);
    box-shadow:inset 0 0 .2em rgba(0,194,255, .6)
}
#form input[type="submit"].button:hover {color: green}

.button:hover:not(.disabled), input[type="submit"].button:hover, #form input[type="submit"].button:hover {
    background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
    background-color:#e9e9e9;
    color: #000;
    border-color: rgba(0,255,100,.4)
}

.avatar {
    max-width: 100px;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    margin-top: 10px
}
.member {margin-top: 8px;}
.more .button{padding: .1em .5em;text-indent:0;float:left}
.more a{font-size: .8em}
.more a:after{content:'\00bb';font-size:1.3em;padding:0 .2em}

.comments {margin:1.5em 0;padding: .5em}
.comments h3{margin-top: 0}
.comments div.resume {position:relative}
.comments .button {padding: .2em 1.3em .1em}
.comments time{padding-right: 3em}
.comments .resume span{margin-right: 10px}
.comments .resume div{position:absolute;padding-left:1em;top: 1em;right:7px;border-left:1px solid #e5e5e5}
.comment {padding: 1.2em 6em 1.3em 1em; color: #536186;font-family: 'Arabic Fixed','Simplified Arabic','Arabic Transparent'}
.odd .comment {color: #000}
.even .comment {color: #536186}
.odd {background: #eee;}
.even {background: #f8f8f8}
.center {text-align:center}

.black {color: black}
.lightBlue {color: #29acff}
.blue {color: blue}
.orange {color: #ee7900}
.gray {color: grey}
.silver {color: silver}
.green {color: green}
.red {color: red}

.table {border-collapse:collapse;padding: 10px;width: 100%}
.table, .table th,.table td {border: 1px solid gray; padding: 5px}

.flush {padding:5px 10px;margin: 10px 0; font-size:18px;border-radius: 8px}
.flush {color: green;border: 1px solid green;background: #e9ffe3}
.errors{color:red;margin-top: .5em}

.ariane {font-size: .9em; margin-bottom: 2em}
.ariane a {font-weight: normal; color: #0061cd}
.ariane a:after {content: " » "; color: #000}
.ariane a:last-of-type {color: gray}
.ariane a:last-of-type:after {content: ""}

@media screen and (max-width: 740px)
{
	#navigation form {display:block;width:auto;position:absolute;left:0;top:-2.5em;background:none;border:0}
	#navigation form input[type="text"] {
        background: url("loupe.png") #eee;
        background-repeat: no-repeat;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        border-radius: 0;
        border: 1px solid gray;
        color: #555
	}
	#form {width: 98%}
}

@media screen and (max-width:600px)
{
	#main{padding: .5em}
    #navigation nav, #navigation nav a, #navigation form {
		display:block;
		width:auto;
        position: relative;
		top:0;
        text-align: right;
        border-bottom: 1px solid #afafaf;
        background : #a2a2a1
    }
    #header {padding-bottom: 2em}
    #header h1 {font-size: 2em}
    #form input, #form textarea {width:85%;}
    #form input[type="submit"] {margin-right: 0}
    nav#drop {display: none}
    nav#drop a {padding: .4em .8em}
    .avatar {width: 50px;height: 50px}
    .dropdown {display: block}
    .dropdown a {color: red}
    article .content, article .sidebar{width : 98%}
}

@media screen and (max-width:480px)
{
    body {font-size: 92%}
    #header {height: auto;}
    #header nav
    {
        margin: -.5em -.8em 0.5em;
        padding:.3em;
        overflow: hidden;
    }
    #header nav a {padding:.7em .8em}
    #header img.avatar{margin-right:10px;}
    #header .avatar {float:left;margin:0;padding:0;width:40px;height:40px}
	#header span:last-child {display:none}
    #header h1 {width:100%;}
    nav#drop a{padding: .3em .8em}
    .content, article{font-weight:normal}
}


يمكنكم من الآن تجربة عرض صفحة الإستقبال ، ستحصلون على صفحة شبيهة بهذه :