سلسلة دروس الفريموورك Vue.js [درس#8 ورشة عمل تسجيل دخول]

في الدرس السابق

تعرفنا على قدرات الأستاذ vue :sunglasses: الخارقة في ازدواجية ربط البيانات [two-way data binding] ومدى سهولتها…

قبل البداية:

  1. الدروس ستكون مكتوبة بالخطوات
  2. يوجد شرح فيديو بالأسفل مع كل درس
  3. يرجى ربط أحزمة المقاعد استعدادا لانطلاق الطائرة :rocket::airplane::flying_saucer:

فهرس الدروس
  1. درس#1 تثبيت الأدوات
  2. درس#2 Vue instance
  3. درس#3 data & methods
  4. درس#4 Data Binding
  5. درس#5 events & event modifiers
  6. درس#6 keyboard modifiers
  7. درس#7 two-way data binding
  8. درس#8 ورشة عمل تسجيل دخول

يلا نبدأ :smiley:

ده الشكل اللي هيتم تنفيذه:

بالنسبة للتصميم فهو ليس تصميمي الخاص، يمكنكم نسخ الـlayout التالي:

انسخ الإطار التالي
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  
  <!--Fontawesome CDN-->
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">  
  
  <link rel="stylesheet" href="main.css">
  <!-- Scripts needed from Content Delivery Network [CDN] -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- vuejs -->
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script></head>
<body>

  <div id="my-app">
    <!-- code here -->
    
  </div>
  <script src="app.js"></script>
</body>
</html>

وبإضافة الـCSS:

إضافة CSS styles
@import url('https://fonts.googleapis.com/css?family=Numans');

html,body{
background-image: url('http://getwallpapers.com/wallpaper/full/a/5/d/544750.jpg');
background-size: cover;
background-repeat: no-repeat;
height: 100%;
font-family: 'Numans', sans-serif;
}

.container{
height: 100%;
align-content: center;
}

.card{
max-height: 570px;
margin-top: auto;
margin-bottom: auto;
width: 400px;
background-color: rgba(0,0,0,0.5) !important;
}

.social_icon span{
font-size: 60px;
margin-left: 10px;
color: #FFC312;
}

.social_icon span:hover{
color: white;
cursor: pointer;
}

.card-header h3{
color: white;
}

.social_icon{
position: absolute;
right: 20px;
top: -45px;
}

.input-group-prepend span{
width: 50px;
background-color: #FFC312;
color: black;
border:0 !important;
}

input:focus{
outline: 0 0 0 0  !important;
box-shadow: 0 0 0 0 !important;

}

.remember{
color: white;
}

.remember input
{
width: 20px;
height: 20px;
margin-left: 15px;
margin-right: 5px;
}

.login_btn{
color: black;
background-color: #FFC312;
width: 100px;
}

.login_btn:hover{
color: black;
background-color: white;
}

.links{
color: white;
}

.links a{
margin-left: 4px;
}

لنقم بإضافة تصميم كارت تسجيل الدخول داخل الصفحة:

تصميم الكارت
//index.html
<div id="my-app">
    <!-- code here -->
    <div class="container mt-5 pt-5">
      <div class="d-flex justify-content-center h-100">
        <div class="card">
          <div class="card-header">
            <h3>Sign In</h3>
            <div class="d-flex justify-content-end social_icon">
              <span><i class="fab fa-facebook-square"></i></span>
              <span><i class="fab fa-google-plus-square"></i></span>
              <span><i class="fab fa-twitter-square"></i></span>
            </div>
          </div>
          <div class="card-body">
            <form>
              <div class="input-group form-group">
                <div class="input-group-prepend">
                  <span class="input-group-text"><i class="fas fa-user"></i></span>
                </div>

                <!-- حقل الاسم -->
                <input type="text" class="form-control" placeholder="username">
                
              </div>
              <div class="input-group form-group">
                <div class="input-group-prepend">
                  <span class="input-group-text"><i class="fas fa-key"></i></span>
                </div>

                <!--حقل الباسوورد-->
                <input type="password" class="form-control" placeholder="password">
              
              </div>
              <div class="row align-items-center remember">
                <input type="checkbox">Remember Me
              </div>
              <div class="form-group">
                <input type="submit" value="Login" class="btn float-right login_btn">
              </div>
            </form>
          </div>
          <div class="card-footer">
            <div class="d-flex justify-content-center links">
              Don't have an account?<a href="#">Sign Up</a>
            </div>
            <div class="d-flex justify-content-center">
              <a href="#">Forgot your password?</a>
            </div>
          </div>
        </div>
      </div>
    </div>    

بالنسبة لحقل الاسم نود تعريف متغير name لربطه بالحقل
التعديل في ملف main.js:

الآن بإمكاننا استخدام v-model لكل input لربطهما بالمتغيرات:

نضيف قبل card-footer الكود التالي لعرض عدد الحروف للمتغير name:

// index.html
          <!-- // ….. -->
          <!-- validation experiment -->
          <div class="d-flex flex-column justify-content-center pt-4">
            <p class="links text-success align-self-center">
              name characters: {{ name.length }}
            </p>
          </div>
          <!-- <div class="card-footer"> -->

الشكل حتى الآن:

لنجرب معا اضافة validation بسيط وظيفته تنبيهنا للحد الأقصى من عدد حروف الاسم مثلا،
داخل ملف app.js:

نستخدم الـevent modifier الذي نريده لاستدعاء دالة التحقق (characterChecker) => ممكن نستخدمkeyup أو keydown

نعمل refresh ونجرب:

الأفكار كثيرة جدا، يمكنكم التلاعب بالمزيد!

انتظرونا في الدروس القادمة!

3 Likes