info@semi-colen.com 002-010-90-2500-88
August 18, 2020 - بواسطة مشرف

تصميم وبرمجة موقع تواصل اجتماعي الجزء السابع| تصميم صفحة تسجيل الدخول

أولا إخفاء شريط الناف بار: -

 نفتح ملف init.php ونستبدل هذا الكود: -

    include $tmbl . 'nav.php';
 
   

بهذا الكود: -

if(!isset($nonav)){
    include $tmbl . 'nav.php';
}
 

ثانيا تصميم صفحة تسجيل الدخول: -

1- ننشيء ملف جديد ونسميه login.php.
2- بعد حفظ الملف نضع هذا الكود: -
 
<?php
$nonav = '';
include 'init.php';
?>
<body class="login">
<div class="container">
<div class="login-form">
    <form>
    <div class="form-group">
        <label class="log"> Email: - </label>
        <input class="form-control" type="email" name="Email"  placeholder="Type your Email">
    </div>
    <div class="form-group">
        <label class="log"> Password: - </label>
        <input class="form-control" type="password" name="Password" placeholder="Type your Password">
    </div>

    <div class="form-group">
        <button class="form-control login-btn" type="submit">Login <i class="fas fa-sign-in-alt"></i> </button>
    </div>
    </form>
     <div class="form-group">
    <p class="text-center">
        <a class="signup-link" href="sginup.php"> Or Signup </a>
        </p>
         <p class="text-center">
        <a class="forgetpassword-link" href="forgetpassword.php"> Forgot your password? </a>
        </p>
    </div>
    </div>
    
</div>
</body>
 
3- ننشيء ملف جديد ونسميه style.css ونقوم بحفظه في مجلد css الموجود داخل مجلد themes.
4-  نضع هذه الاكواد في ملف style.css: -

/* start login */
body.login{
    background-image: url('../img/login.jpeg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}
.login-form{
    position: relative;
    top: 300px;
    left: 320px;
    width: 400px;
    background: rgba(255, 255, 255, 0.56);
    padding: 50px;
    border-radius: 50px;
    margin-top: -115px;
}
label.log {
    font-weight: bolder;
    font-size: 17px;
}
.login-btn{
    height: 50px;
    border: 1px solid #111;
    background: #e05c5c;
    color: white;
    font-weight: bolder;
    border-radius: 50px;
}
.login-btn:hover{
    height: 50px;
    border: 1px solid #111;
    background: #e04445;
    color: white;
    font-weight: bolder;
    border-radius: 50px;
}
a.signup-link {
    font-weight: bolder;
    font-size: 15px;
}
a.signup-link {
    color: black;
}
a.forgetpassword-link {
    color: black;
}
a.signup-link:hover {
    cursor: pointer;
    text-decoration: underline;
}
a.forgetpassword-link:hover {
    text-decoration: underline;
    cursor: pointer;
}
/* end login */
 
5- نفتح ملف header.php الموجود داخل مجلد tmbl والموجود في مجلد inc ونضع هذا الكود

<link rel="stylesheet" href="themes/css/style.css">
 
ملاحظة هامة: -
يمكنك التعديل على ملف style.css كيفما شئت سواء من حيث التصميم أو من حيث الاشكال والالوان.

 ثالثا اضافة خلفية لصفحة تسجيل الدخول: -

1- ننشيء مجلد جديد في مجلد themes ونسميه img.
2- اختر اي صورة كما تريد ونضعها بداخل مجلد img.
3- نسمي الصورة login ونتأكد من نوع الصورة من حيث الامتداد هل هي  jpg أم png أم jpeg أو غيرها.
ملاحظة: -
1- لابد من كتابة اسم الصورة مع الامتداد بشكل صحيح وإلا لم تظهر الصورة.
2- تأكد دائما بوجود الصورة في مسارها الصحيح وإلا لم تظهر الصورة.