طراحی وب سایت ساده با php

این یک آموزش دقیق در مورد طراحی سایت ساده با php یا بکاند در PHP است. در این مطلب کارکردهای اساسی CRUD، احراز هویت و امنیت را آموزش خواهم داد که با استفاده از این موارد می توانید پروژه ساده طراحی سایت با php را انجام دهید. مواردی مانند راه اندازی سرور، ایجاد صفحات عمومی HTML، ایجاد پایگاه داده و جداول آن و افزودن کاربران به پایگاه داده.
ساخت سایت ساده با PHP
اگر به ساخت وب سایت با استفاده از php علاقه دارید، در جای درستی قرار گرفته اید. تا به حال به این فکر کرده اید که داشتن وب سایتی که دارای عملکرد ورود/خروج است چقدر جالب می باشد و چه امکاناتی را در اختیار شما قرار می دهد؟ آیا می خواهید نحوه ایجاد، خواندن، به روز رسانی یا حذف (CRUD) رکوردها در پایگاه داده را بیاموزید؟
آیا مسیر آموزش های قبلی خود را گم کرده اید؟ خوب، ما به شما یاد میدهم که چگونه از ابتدا با استفاده از زبان برنامه نویسی php طراحی سایت را انجام دهید تا تمام جزئیات مربوط به نحوه کار کد را به خوبی در یک پروژه ساده php بیاموزید. اگر در زمینه توسعه بک اند با php تازه کار هستید، این آموزش برای شما مناسب است.
ما همه چیز را با جزئیات توضیح خواهیم داد تا مجبور نباشید در مورد روش های خاصی که استفاده می شود تحقیق کنید. همچنین در این آموزش از هیچ فریم ورکی برای ساده کردن آموزش استفاده نخواهیم کرد.
پیش نیاز طراحی سایت با php
در گام اول باید بدانید که طراحی سایت نیاز به آموزش های جامع دارد و به همین دلیل نیز پیشنهاد می کنیم تا قبل از هر کاری آموزش جامع طراحی سایت را مشاهده کنید که از سطح مقدماتی تا حرفه ای تمام مطالب را در آن پوشش داده ایم.
در این آموزش، از زبان هایی استفاده خواهیم کرد که توانایی های شما را افزایش می دهند. اگر واقعاً هیچ یک از مواردی را که ذکر خواهم کرد نمی دانید، بهتر است آموزش های مقدماتی تا پیشرفته را از یک منبع تهیه کنید و سعی کنید با جریان این آموزش حرکت کنید. درک فعالیت های انجام گرفته در این آموزش آسان است زیرا ما علاقه ای به استفاده از روش های پیشرفته برای طراحی وب سایت ساده با php نداریم. برای شروع کار باید به موارد زیر تسلط داشته باشید:
- HTML/CSS: مطمئناً وقتی صحبت از طراحی سایت می شود، این دو زبان هرگز از لیست خارج نمی شود.
- جاوا اسکریپت: برای یک اسکریپت تغییر مسیر باید از جاوا اسکریپت استفاده شود، البته در حال حاضر نیازی به جی کوئری نیست.
- mySQL: ابتدایی ترین زبان برای موضوعات یا کوپری ها می باشد. ما از این تکنولوژی برای قابلیت های CRUD (ایجاد، خواندن، بهروزرسانی، حذف) استفاده خواهیم کرد.
نرم افزار های مورد نیاز برای طراحی سایت با PHP - ویرایشگر متن: Sublime Text/Notepad++ کار شما را انجام خواهد داد. این به عنوان محیط کدنویسی ما عمل خواهد کرد.
- XAMPP: این نرم افزار می تواند وب سرور ما را ایجاد کند. این برنامه جایی است که ما فایل های وب سایت خود را ذخیره می کنیم و داده های خود را در پایگاه داده ذخیره می کنیم.
- مرورگر: شما می توانید از هر مرورگری تا زمانی که مقدار زیادی از رم شما را نمی خورد استفاده کنید.
برای شروع کار طراحی یک سایت ساده با پی اچ پی، حتما باید موارد بالا را نصب داشته باشید.
همچنین در این پروژه، نیاز است تا تسلط کافی به موارد زیر داشته باشید:
- استفاده از دستورات CRUD در SQL: ایجاد، خواندن، به روز رسانی و حذف رکوردها در پایگاه داده.
- احراز هویت و امنیت ساده: ورود و خروج، مدیریت کاربران غیرمجاز و محدود کردن دسترسی.
- ویرایش ساده تاریخ و زمان: نمایش زمان و تاریخ پست ها و نظارت بر پست های شما.
- نمایش داده های عمومی و خصوصی: به سادگی اطلاعات را فقط برای کاربرانی که وارد سیستم شده اند و برای عموم نمایش دهید.
سرفصل های آموزش پروژه ساده طراحی سایت php
توجه: اگر در قسمت خاصی توقف کرده اید یا می خواهید سریع جستجو کنید، می توانید به سادگی با فشار دادن Ctrl + f از سر گرفته و شماره ای را که آخرین بار در آن توقف کرده اید، جستجو کنید.
- راه اندازی سرور
- ایجاد صفحات عمومی HTML
- ایجاد پایگاه داده و جداول آن
- افزودن کاربران به پایگاه داده
- ورود کاربر: احراز هویت
- راه اندازی صفحه اصلی برای کاربران وارد شده و خروج از سیستم
- تست امنیت صفحه
- افزودن داده به لیست (فقط دسترسی کاربر)
- نمایش داده ها در صفحه اصلی
- ویرایش داده ها
- حذف داده ها
- نمایش داده های عمومی
اگر با مراحل طراحی سایت آشنایی ندارید، میتوانید این مقاله از سایت را مشاهده کنید تا با این فرایند آشنا شوید.
راه اندازی وب سرور
اکنون که همه چیز آماده شده، می توانیم شروع توسعه سایت ساده php را بزنیم. همانطور که اصول برنامه نویسی ادامه دارد، بیایید با ایجاد یک فریاد ساده از “hello world” در سرور خود شروع کنیم.
- ابتدا به دایرکتوری که XAMPP خود را در آن نصب کرده اید (معمولاً در C:\xampp) بروید. از آنجا به پوشه htdocs (معمولاً در C:\xampp\htdocs) بروید و یک پوشه به نام MyFirstWebsite ایجاد کنید.
2.از آن قسمت یک URL محلی برای وب سایت خود ایجاد کنید. از آن پوشه برای قرار دادن تمام فایل های وب سایت (html.، php.، css.، .js، و غیره) استفاده می شود. ویرایشگر متن خود را باز کنید تا توسعه سایت php را انجام دهیم.
کاری که ما انجام خواهیم داد یک صفحه HTML اولیه و نمایش “hello world” از سرور با استفاده از یک دستور اولیه PHP است. سپس دستور زیر را تایپ می کنیم:
<html>
<head>
<title>My first PHP Website</title>
</head>
<body>
<?php
echo “<p>Hello World!</p>”;
?>
</body>
</html>
فایل را در پوشه “MyFirstWebSite” ذخیره کنید و نام آن را “index.php” بگذارید. (همانطور که در تصویر بالا مشاهده می شود.) حالا که فایل را دارید، بیایید کنترل پنل XAMPP خود را باز کنیم. در صورتی که روی دسکتاپ شما ظاهر نشود، همانطور که در تصویر مشاهده می شود در پوشه XAMPP شما قرار دارد:
Apache و mySQL را با کلیک بر روی دکمه “start” در ستون اقدامات اجرا کنید. شما باید یک PID تصادفی و شماره پورت پیش فرض را ببینید. Apache نام وب سرور ما است که در آن تمام فایل ها را مدیریت خواهیم کرد و همچنین به عنوان رابط بین مرورگر وب و پایگاه داده ما است که تمام اطلاعات را ذخیره می کند.
مرورگر وب خود را باز کنید و در نوار آدرس، localhost را تایپ کنید. شما باید منوی XAMPP خود را ببینید. اگر اولین بار است که آن را اجرا می کنید، از شما میپرسد که چه زبانی را ترجیح می دهید، فقط کافی است انتخاب کنید و شما را به منو هدایت می کند. اگر متوجه شده اید که دایرکتوری localhost/xampp است، صفحه پیش فرض شما را در آنجا هدایت می کند، حتی اگر لوکال هاست را تایپ کنید.
اگر ظاهر شد، به این معنی است که سرور XAMPP شما اکنون در حال اجرا است. اکنون بیایید وب سایتی را که به تازگی قرار داده اید اجرا کنیم. سعی کنید localhost/MyFirstWebsite را تایپ کنید.
ایجاد صفحه Public HTML برای سایت php
در مرحله بعد، بیایید وب سایت خود را مجدداً اصلاح کنیم و یک لینک ثبت نام اضافه کنیم که در آن کاربران ما می توانند ثبت نام کنند و همچنین یک صفحه ورود به سیستم بلافاصله پس از ثبت نام داشته باشیم که کاربر به آن هدایت می شود. صفحه اصلی خود را با کد زیر تغییر دهیم:
<html>
<head>
<title>My first PHP Website</title>
</head>
<body>
<?php echo “<p>Hello World!</p>”; ?>
<a href=”login.php”> Click here to login <a href=”register.php”> Click here to register
</body>
</html>
همانطور که می بینید، ما فقط دو لینک اضافه کردیم که برای ورود و ثبت نام هستند. بیایید ابتدا صفحه ثبت نام را ایجاد کنیم.
ساخت صفحه ثبت نام در php
نام فایل register.php
<html>
<head>
<title>My first PHP Website</title>
</head>
<body>
<h2>Registration Page</h2>
<a href=”index.php”>Click here to go back<br/><br/>
<form action=”register.php” method=”POST”>
Enter Username: <input type=”text”
name=”username” required=”required” /> <br
/> Enter password: <input type=”password”
name=”password” required=”required” /> <br
/> <input type=”submit” value=”Register”/>
</form>
</body>
</html>
همانطور که می بینید، این فقط یک فرم ساده است که کاربر می تواند اطلاعات خود را در آن وارد کند.
ساخت صفحه ورود در php
نام فایل login.php
اساساً، این همان کدی است که از register.php گرفته شده است، اما تغییرات ایجاد شده همان هایی بود که زیر آن خط کشیده شده بود. دوباره لوکال هاست/MyFirstWebsite را اجرا کنید و صفحات شما باید شبیه این باشند:
ساخت پایگاه داده و جداول آن برای پروژه ساده php
اکنون که صفحه اصلی وب سایت ساده با php را داریم، بهتر است تا ساخت پایگاه داده را انجام دهیم. ابتدا localhost/phpmyadmin را تایپ کنید. این شما را به صفحه اصلی phpmyadmin هدایت می کند:
localhost/phpmyadmin
از آنجا، به تب Databases واقع در بالا بروید، سپس از کادر متنی در وسط، عبارت first_db را تایپ کنید و سپس روی “ایجاد” کلیک کنید. فقط Collation را همانطور که هست رها کنید.
شما به تازگی اولین پایگاه داده خود را با موفقیت ایجاد کرده اید. حالا از آنجا، بیایید جدولی ایجاد کنیم که در آن بتوانیم کاربران خود را ثبت کنیم و اطلاعات را نمایش دهیم. ابتدا روی first_db واقع در سمت چپ کلیک کنید و جدولی به نام users با 3 ستون ایجاد کنید و سپس بر روی Go کلیک کنید.
برای ساختار جدول، مطمئن شوید که فیلدهای زیر را دارید، سپس روی ذخیره کلیک کنید:
- فرمت: نام ستون – نوع – طول – ویژگی تهی – سایر خصوصیات
- شناسه – INT – N/A – تهی نیست – افزایش خودکار
- نام کاربری – varchar – 50 – پوچ نیست
- رمز عبور – varchar – 50 – پوچ نیست
اگر مشخص نیست همه چیز را به طور پیش فرض بگذارید.
توجه: برای auto_increment باید به سمت راست اسکرول کنید. ما فقط عکس را ویرایش کردیم تا با فیلد A_I مطابقت داشته باشد.
سپس جدول دیگری با نام لیست با 7 ستون و برای ساختار جدول ایجاد کنید:
- id – INT – N/A – Not Null – Auto Increment
- details – text – Not null
- date_posted – varchar – 30 – Not null
- time_posted – Time – Not null
- date_edited – varchar – 30 – Not null
- time_edited – Time – Not null
- public – varchar – 5 – Not null
در اینجا فرایند ساخت پایگاه داده برای پروژه طراحی سایت ساده با php نیز به اتمام رسید.
افزودن کاربران به پایگاه داده
حالا که تیبل های پایگاه داده را داریم بیایید به قسمت سرگرم کننده برویم، یعنی صفحه ثبت نام خود را وارد عمل کنیم. از register.php خود، موارد زیر را در زیر کدهای html اضافه کنید:
<?php
if($_SERVER[“REQUEST METHOD”] == “POST”){
$username = mysql_real_escape_string($_POST[‘username’]);
$password = mysql_real_escape_string($_POST[‘password’]);
echo “Username entered is: “. $username . “<br />”;
echo “Password entered is: “. $password;
}
?>
این هم توضیح کد:
$_SERVER[“REQUEST_METHOD”] == “POST” – بررسی میکند که آیا فرم یک روش POST دریافت کرده است یا خیر وقتی بر روی دکمه ارسال، کلیک شد. متد POST در html از روش “POST” ایجاد می شود.
$_POST[”] – نام را از یک روش POST دریافت می کند. این فقط ورودی را بر اساس نام از فرم دریافت می کند که در اینجا نام کاربری و رمز عبور می باشد.
mysql_real_escape_string() – ورودی را در یک رشته کپسوله می کند تا از ورودی های SQL Injections جلوگیری کند. این تضمین می کند که رشته های شما از کاراکترهای غیر ضروری فرار نمی کنند. حالا سعی کنید به register.php خود بروید و سعی کنید هر چیزی را وارد کنید و سپس روی “ثبت نام” کلیک کنید. در اینجا ما، نام کاربری xtian و رمز عبور را 123456 قرار دادم. باید ورودی های زیر را نمایش دهد. این نمونه من است:
در این قسمت از ساخت سایت ساده با PHP، باید نحوه دریافت ورودی از فرم را درک کرده باشید. حالا آن را به پایگاه داده اضافه کنید. برای این کار، در register.php کد زیر را اضافه کنید:
<?php
if($_SERVER[“REQUEST_METHOD”] == “POST”){
$username = mysql_real_escape_string($_POST[‘username’]);
$password = mysql_real_escape_string($_POST[‘password’]);
$bool = true;
mysql_connect(“localhost”, “root”,“”) or die(mysql_error()); //Connect to server
mysql_select_db(“first_db”) or due(“Cannot connect to database”); //Connect to database
$query = mysql_query(“Select * from users”); //Query the users table
while($row = mysql_fetch_array($query)) //display all rows from query
{
$table_users == $row[‘username’]; // the first username row
// is passed on to $table_users,
// and so on until the query is finished
if($username == $table_users) // checks if there are any matching fields
{
$bool = false; // sets bool to false
Print ‘<script>alert(“Username has been taken!”);</script>’; //Prompts the user
Print ‘<script>window.location.assign(“register.php”);</script>”;//redirects to
//register.php
}
}
if($bool) // checks if bool is true
{
mysql_query(“INSERT INTO users (username, password) _
VALUES (‘$username‘, ‘password‘)”); // inserts value into table users
Print ‘<script>alert(“Successfully Registered!”);</script>‘; // Prompts the user
Print ‘<script>window.location.assign(“register.php”);</script>‘; // redirects to
// register.php
}
}
?>
در اینجا توضیحات مربوط به کد آمده است:
- mysql_connect (“نام سرور”، “نام کاربری سرور”، “گذرواژه سرور”) – نحوی که برای اتصال به سرور XAMPP ما استفاده می شود. localhost یا 127.0.0.1 نام سرور است. نام کاربری پیش فرض root است و برای پیش فرض پسوردی وجود ندارد.
- mysql_select_db (“نام پایگاه داده”) – پایگاه داده مورد استفاده را انتخاب می کند.
- or die(‘Message’) – پیام خطا را در صورت عدم رعایت شرایط نمایش می دهد.
- mysql_query (‘sql query’) – پرس و جوهای SQL را انجام می دهد.
- mysql_fetch_array(‘query’) – تمام پرس و جوهای موجود در جدول را برای نمایش یا دستکاری داده ها واکشی می کند. در یک حلقه while قرار میگیرد تا تمام سطرها را پرس و جو کند. توجه داشته باشید که در هر حلقه فقط 1 ردیف درخواست می شود به همین دلیل یک حلقه while ضروری است.
- $row[‘name’] – مقدار ستون در جستار فعلی. به صورت یک آرایه نمایش داده می شود. در مورد ما، $row نام متغیر ردیف ما در حلقه است.
- ورودی هایی را که قبلا ایجاد کرده اید امتحان کنید و ببینید چه اتفاقی می افتد. باید از شما درخواست کند که با موفقیت ثبت نام کرده اید. سعی کنید به phpmyadmin بروید و جدول کاربران خود را ببینید:
تبریک می گویم! اکنون می دانید که چگونه داده ها را با اعتبارسنجی داده ها به پایگاه داده اضافه کنید.
ورود و احراز هویت کاربر در php
اکنون برای صفحه ورود به سیستم، یک فایل جدید به نام checklogin.php ایجاد کنید. دلیل آن بازگشت به login.php ما است، فرم ما یک عمل به نام “checklogin.php” دارد، به ویژه
درباره مدیریت
من عاشق برنامه نویسی و تکنولوژی هستم و 10 سال در این زمینه مشغول به فعالیت هستم و پروژه های مختلفی رو در زمینه های سایت و شبکه های کامپیوتری و امنیت اطلاعات انجام دادم و در حال حاضر مدیر و موسس شرکت انفورماتیک طراحی پایا آنوش هستم که در زمینه ی طراحی سایت و سیستم های هوشمند و برقراری امنیت اطلاعات سیستم های کامپیوتری و همچنین آموزش فعالیت دارد و میخواهم هر آنچه که در طی این 10 سال یاد گرفتم و تجربه کردم رو با شما به اشتراک بگذارم.
نوشته های بیشتر از مدیریت
دیدگاهتان را بنویسید