Computer Store Project

سنتعلم في هذه السلسلة من الدروس إن شاء الله كيفية إنشاء متجر إلكتروني وسيكون المتجر خاص ببيع أجهز الكمبيوتر وملحقاته وسيتم تصميم المتجر بإطار العمل لارافيل الاصدار العاشر وسنتعرف على بعض المفاهيم الأساسية المهمة في تصميم مشروعنا

وسيتناول الجزء الثاني النقاط التالية:

أولاً: الصفحة الرئيسية home page

ثانياً: صفحة heade-footer

ثالثاً: صفحة navbar-layout

رابعاً:مسار الصور وملفات css-javascript-bootstrap

خامساً: صفحة تسجيل مستخدم

أولاً: الصفحة الرئيسية

سننشيء صفحة تسمى homepage ومجلد يسمى includes كالتالي

وندخل لملف web.php ونكتب الكود التالي

				
					Route::get('/', function () {
    return view('homepage');
});

ثانياً: صفحة heade-footer

داخل مجلد includes سوف ننشي صفحة تسمى header وسوف نكتب بداخلها كود header وروابط البوتستراب وروابط css

وننشيء صفحة اخرى تسمى footer نضع بداخلها كود تزييل الموقع مثل روابط الصفحات الخارجية وسائل التواصل الاجتماعي أرقام التليفون والبريد الإلكتروني أو خريطة لعنوان معين

ثالثاً: صفحة layout-navbar

داخل مجلد includes سوف ننشيء صفحة اخرى تسمى navbar نضع بداخلها كود القائمة التي سيكون فيها روابط مثل الصفحة الرئيسية وصفحة اتصل بنا وصفحة تسجيل مستخدم وصفحة تسجيل دخول وصفحة عربة التسوق وأي روابط أخرى سوف نحتاجها

وننشيء ملف آخر يسمى layout سنضع بداخله الكود التالي

				
					@include('includes.header')
@include('includes.navbar')
    @yield('content')
@include('includes.footer')

أما بالنسبة لكود الصفحة الرئيسية يمكنك الدخول على موقع خاص بتصميمات الفرونت اند وتختار صفحة رئيسية وسوف نصع في اخر الدرس رابط لموقع يمكنك منه تحميل صفحات فرونت اند بطريقة مجانية

ونقسم الصفحة الرئيسية كالتالي

ونقوم بقص كود header ونضعه في ملف header

ونقوم بقص كود footer ونضعه في ملف footer

ونقوم بقص كود navbar ونضعه في ملف navbar

ونضع في صفحة home page أي أكواد في جزء content كالتالي

				
					@extends('includes.layouts')
@section('content')

@endsection

رابعاً:مسار الصور وملفات css-javascript-bootstrap

سوف ننشي مجلد يسمى مثلاً assets داخل مجلد public ونضع بداخله ملفات bootstrap و css والجافا سكريبت ومجلد الصور كالتالي

وللوصول لمسار البوتستراب الخاص بملفات css نكتب الكود التالي في ملف header بين وسمي head

				
					  <link data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'"  href="{{asset('assets/bootstrap/css/bootstrap.min.css')}}" rel="preload">

وللوصول لمسار البوتستراب الخاص بملفات javasvript نكتب الكود التالي في ملف header بين وسمي head

				
					<script type="litespeed/javascript" data-src="{{asset('assets/bootstrap/js/bootstrap.bundle.min.js')}}"></script>

وللوصول لمسار صورة نكتب الكود التالي مثلاً سنضع صورة خاصة بلوجو الموقع كالتالي بين وسمي head في ملف header

				
					<link href="{{asset('assets/imgages/app-logo.png')}}" rel="icon">

وسوف نضع عنوان للموقع من خلال الذهاب لملف env ونكتب الكود التالي

وهذا شكل الصفحة الرئيسية بعد تنفيذ الخطوات السابقة

خامساً: صفحة تسجيل مستخدم register

سوف ننشيء custom register يستطيع من خلاله المستخد إنشاء حساب على الموقع من خلال الخطوات التالية

وسنضع في صفحة register الكود التالي

				
					<form action="{{ route('register.store') }}" method="post">
            @csrf
            <div class="input-group mb-3">
                <span class="input-group-text" id="basic-addon1"
                    style="width:150px !important; border-radius:5px !important;">الاسم</span>
                <input type="text" name="name" class="form-control" placeholder="الاسم" aria-label="Username"
                    value="{{ old('name') }}" aria-describedby="basic-addon1">
            </div>

            <div class="input-group mb-3">
                <span class="input-group-text" id="basic-addon2"
                    style="width:150px !important; border-radius:5px !important;">العنوان</span>
                <input type="text" name="address" class="form-control" placeholder="العنوان"
                    aria-label="Recipient's username" value="{{ old('address') }}" aria-describedby="basic-addon2">
            </div>

            <div class="input-group mb-3">
                <span class="input-group-text" id="basic-addon2"
                    style="width:150px !important; border-radius:5px !important;">البريد الإلكتروني</span>
                <input type="text" name="email" class="form-control" placeholder="البريد الإلكتروني"
                    aria-label="Recipient's username" value="{{ old('email') }}" aria-describedby="basic-addon2">
            </div>

            <div class="input-group mb-3">
                <span class="input-group-text" id="basic-addon2"
                    style="width:150px !important; border-radius:5px !important;">الموبايل</span>
                <input type="text" name="phone" class="form-control" placeholder="الموبايل"
                    aria-label="Recipient's username" value="{{ old('phone') }}" aria-describedby="basic-addon2">
            </div>

            <div class="input-group mb-3">
                <span class="input-group-text" id="basic-addon2"
                    style="width:150px !important; border-radius:5px !important;">كلمة السر</span>
                <input type="password" name="password" class="form-control" placeholder="كلمة السر"
                    aria-label="Recipient's username" aria-describedby="basic-addon2" id="password">
                <span class="input-group-text" id="basic-addon1"><i class="fa fa-eye-slash" id="eye1"></i></span>
            </div>

            <div class="input-group mb-3">
                <span class="input-group-text" id="basic-addon2"
                    style="width:150px !important; border-radius:5px !important;">تأكيد كلمة السر</span>
                <input type="password" name="confirm_password" class="form-control" placeholder="كلمة السر"
                    aria-label="Recipient's username" aria-describedby="basic-addon2" id="confirm_password">
                <span class="input-group-text" id="basic-addon1"><i class="fa fa-eye-slash" id="eye2"></i></span>
            </div>

            <div class="input-group mb-3">
                <button class="btn btn-success">حفظ البيانات</button>
            </div>
        </form>

ثم ننشيء controller يسمى AuthController

ثم ندخل لملف web.php ونكتب الأكواد التالية الخاصة بمسار الصفحة والخاصة بفورم التسجيل

				
					Route::get('/register',[AuthController::class,'register']);
Route::post('/register',[AuthController::class,'store'])->name('register.store');

ثم في AuthController نكتب الكود التالي

				
					<?php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Log;

class AuthController extends Controller
{
    public function register()
    {
        return view('register');
    }

    public function store(Request $request)
    {
        $validated = $request->validate(
            [
                'name' => 'required|max:255',
                'address' => 'required|max:255',
                'email' => 'required|email:rfc,dns|unique:users',
                'phone' => 'required|regex:/^([0-9\s\-\+\(\)]*)$/|min:11',
                'password' => 'required|same:confirm_password|min:8',
                'confirm_password' => 'required'

            ],
            [
                'name.required' => 'حقل الاسم مطلوب',
                'address.required' => 'حقل العنوان مطلوب',
                'email.required' => 'حقل الايميل مطلوب',
                'email.email' => 'تأكد من كتابة الايميل بشكل صحيح',
                'email.unique' => 'غير مسموح بتكرار الايميل',
                'phone.required' => 'حقل التليفون مطلوب',
                'phone.regex' => 'تأكد من رقم التليفون',
                'phone.min' => 'رقم التليفون 11 رقم على الأقل',
                'password.required' => 'حقل كلمة السر مطلوب',
                'password.same' => 'تأكد من مطابقة كلمة السر',
                'confirm_password.required' => 'حقل تأكيد كلمة السر مطلوب',
            ]
        );

        try{

            $user = new User();
            $user->name = $request->name;
            $user->address = $request->address;
            $user->phone = $request->phone;
            $user->email = $request->email;
            $user->password = Hash::make($request->name);
            $user->role = 0;
            $user->save();

            return redirect('/register')->with('success', 'تم الحفظ بنجاح');
        }catch(\Exception $exception){
            Log::error($exception->getMessage());
            return redirect('/register')->with('save_error', 'حدث خطأ اثناء الحفظ');
        }
    }
}

ونفتح ملف User.php في Models ونكتب الكود التالي

				
					   protected $fillable = [
        'name',
        'email',
        'password',
        'address',
        'phone',
        'role',
    ];

وهذا شكل الصفحة بعد تنفيذ الخطوات السابقة

وبهذا نكون قد انتهينا من تصميم الصفحة الرئيسية وصفحة تسجيل مستخدم وسنستكمل إنشاء المتجر في الأجزاء القادمة إن شاء الله

سادساً:المراجع والروابط

تعلم البرمجة

لارافيل

تحميل تصميمات فرونت اند جاهزة

الجزء الأول

Post Views: 153

Computer Store Project part 2

Table of Contents

أولاً: الصفحة الرئيسية

ثانياً: صفحة heade-footer

ثالثاً: صفحة layout-navbar

رابعاً:مسار الصور وملفات css-javascript-bootstrap

خامساً: صفحة تسجيل مستخدم register

سادساً:المراجع والروابط

فكرتين عن“Computer Store Project part 2”

اترك تعليقاً إلغاء الرد

Table of Contents

أولاً: الصفحة الرئيسية

ثانياً: صفحة heade-footer

ثالثاً: صفحة layout-navbar

رابعاً:مسار الصور وملفات css-javascript-bootstrap

خامساً: صفحة تسجيل مستخدم register

سادساً:المراجع والروابط

فكرتين عن“Computer Store Project part 2”

اترك تعليقاً إلغاء الرد

Related Posts

اقترب من المستقبل الذي تحلم بة