1
00:00:03,580 --> 00:00:09,250
في المحاضرة السابقة، رأينا عدة طرق للكشف عن المحتوى للمستخدمين.

2
00:00:09,250 --> 00:00:11,870
لذلك، سيكون هذا تراكب أعلى

3
00:00:11,870 --> 00:00:15,285
صفحة الويب الخاصة بك لإظهار المعلومات للمستخدمين.

4
00:00:15,285 --> 00:00:17,880
لذا، سنلقي نظرة على اثنين من هذه النهج،

5
00:00:17,880 --> 00:00:21,575
تلميحات الأدوات و الوسائط في هذا التمرين.

6
00:00:21,575 --> 00:00:25,300
أولاً، سنضيف تلميح الأدوات إلى هذه الصفحة.

7
00:00:25,300 --> 00:00:29,040
لذلك، والذهاب إلى index.html وفي Jumbotron،

8
00:00:29,040 --> 00:00:33,305
ونحن نرى هذا الزر في Jumbotron هناك.

9
00:00:33,305 --> 00:00:36,000
إلى هذا الزر، سأقوم بإضافة تلميح الأدوات.

10
00:00:36,000 --> 00:00:38,125
حتى الذهاب إلى هذا الزر،

11
00:00:38,125 --> 00:00:44,380
ما سأفعله الآن هو ببساطة الذهاب إلى السطر التالي

12
00:00:44,380 --> 00:00:50,420
بحيث يكون أكثر وضوحا قليلا لكتابة التعليمات البرمجية هناك وفي هذا الزر،

13
00:00:50,420 --> 00:00:53,535
وأنا ذاهب لتقديم تلميح الأدوات هنا.

14
00:00:53,535 --> 00:00:57,740
لذلك، بعد تحذير الزر، أود أن أقول،

15
00:00:58,560 --> 00:01:04,550
البيانات تبديل تلميح الأدوات، حتى تتمكن من رؤية أن

16
00:01:04,550 --> 00:01:12,230
مكون جافا سكريبت يدخل حيز الاستخدام هنا ومن ثم البيانات html-true.

17
00:01:12,230 --> 00:01:17,630
لذا، إذا قمنا بتطبيق سمة HTML هذه البيانات وأرسلتها إلى true،

18
00:01:17,630 --> 00:01:21,965
فهذا يعني أنه يمكن تصميم محتوى تلميح الأدوات باستخدام

19
00:01:21,965 --> 00:01:27,060
HTML ومن ثم سيقولون السطر التالي،

20
00:01:27,060 --> 00:01:31,165
سأعطي سمة العنوان.

21
00:01:31,165 --> 00:01:35,680
لذلك، هذا هو المكان الذي سيتم إرفاق محتويات تلميح الأدوات.

22
00:01:35,680 --> 00:01:42,090
لذلك سوف نقول «أو الاتصال بنا على».

23
00:01:45,810 --> 00:01:52,950
لذلك، يمكنك أن ترى أنني أستخدم HTML

24
00:01:52,950 --> 00:02:02,510
لتنسيق محتويات تلميح الأدوات هناك.

25
00:02:06,070 --> 00:02:16,315
لذلك مع ذلك، يتم إدخال تلميح الأدوات في الزر هناك وأيضا السمة الأخيرة

26
00:02:16,315 --> 00:02:26,095
سأعطيها هو وضع البيانات التي سأعطيها أسفل هنا.

27
00:02:26,095 --> 00:02:32,700
لذلك، وهذا يعني أن هذا تلميح الأدوات سوف تظهر إلى أسفل هذا الزر هنا.

28
00:02:32,700 --> 00:02:36,815
بعد إضافة هذا في الزر،

29
00:02:36,815 --> 00:02:38,610
سنذهب الآن وإضافة

30
00:02:38,610 --> 00:02:45,130
بعض شفرة جافا سكريبت إلى أسفل هذه الصفحة من أجل تنشيط تلميح الأدوات هذا.

31
00:02:45,130 --> 00:02:47,505
الذهاب إلى أسفل الصفحة،

32
00:02:47,505 --> 00:02:57,470
اسمحوا لي أن أعرض البرنامج النصي هناك عن طريق إضافة في علامات البرنامج النصي.

33
00:02:57,470 --> 00:03:04,665
داخل هذا، سوف نحدد شفرة جافا سكريبت الفعلية هنا.

34
00:03:04,665 --> 00:03:07,790
لذلك سوف نقول وثائق الدولار.

35
00:03:07,790 --> 00:03:13,910
لذلك، هذا البرنامج النصي هو في استخدام بناء جملة jQuery هنا.

36
00:03:15,890 --> 00:03:20,880
لذلك، يحدد هذا عندما يكون المستند جاهزًا،

37
00:03:20,880 --> 00:03:23,810
عندما يكون مستند HTML هذا جاهزًا

38
00:03:23,810 --> 00:03:28,775
للعرض وتحديد استدعاء هذه الوظيفة المعينة هنا.

39
00:03:28,775 --> 00:03:32,790
لذلك، نحن توريد وظيفة جافا سكريبت ليتم

40
00:03:32,790 --> 00:03:37,780
استدعاؤها في هذه المرحلة لذلك سنقوم بتحديد وظيفتنا وبعد ذلك سنقول

41
00:03:38,570 --> 00:03:51,510
بين قوسين البيانات تبديل تلميح الأدوات وتلميح الأدوات.

42
00:03:53,240 --> 00:04:01,315
لذلك، هذا هو الرمز الذي سنقوم بتقديمه في هذه الصفحة هنا.

43
00:04:01,315 --> 00:04:09,255
هذا في بناء جملة jQuery وسنغطي jQuery أكثر قليلاً في الوحدة التالية.

44
00:04:09,255 --> 00:04:13,995
في الوقت الحالي، هذا هو تحديد أنه أينما كانت هناك سمة من

45
00:04:13,995 --> 00:04:19,650
هذا النوع لعلامة HTML معينة،

46
00:04:19,650 --> 00:04:21,570
قم بتشغيل تلميح الأدوات.

47
00:04:21,570 --> 00:04:25,420
لذلك، ولكن هذا التغيير سيوفر التغييرات

48
00:04:25,420 --> 00:04:30,510
ثم انتقل وإلقاء نظرة على كيفية ظهور تلميح الأدوات على صفحة الويب.

49
00:04:30,510 --> 00:04:32,760
الذهاب إلى صفحة الويب،

50
00:04:32,760 --> 00:04:36,600
والآن عندما نحمل مؤشر الماوس على النمط هنا،

51
00:04:36,600 --> 00:04:40,755
يمكنك أن ترى أن تلميح الأدوات يتم عرضه في الأسفل هنا.

52
00:04:40,755 --> 00:04:44,950
لذلك، يمكنك ملاحظة أن محتوى تلميح الأدوات هذا هو

53
00:04:44,950 --> 00:04:50,115
بالضبط ما قدمناه كسمة عنوان لهذا القاع هناك.

54
00:04:50,115 --> 00:04:54,095
لذا، هذه هي الطريقة التي يمكننا بها إضافة تلميحات إلى صفحتنا.

55
00:04:54,095 --> 00:04:58,030
تلميحات الأدوات هي طريقة لطيفة لتوفير بعض المعلومات الإضافية

56
00:04:58,030 --> 00:05:03,370
للمستخدم عندما ينتقل المستخدم إلى مواقع مختلفة على الصفحة.

57
00:05:03,370 --> 00:05:06,790
الاستمرار في التمرين، في الخطوة التالية،

58
00:05:06,790 --> 00:05:10,045
سنقوم بإنشاء مشروط في صفحة الويب الخاصة بنا.

59
00:05:10,045 --> 00:05:17,665
سيستضيف هذا المشروط نموذج تسجيل الدخول وسيتم عرضه باستخدام رابط في شريط التنقل الخاص بهم.

60
00:05:17,665 --> 00:05:19,720
لذلك، للبدء،

61
00:05:19,720 --> 00:05:26,700
ينصح bootstrap بوضع جميع التعليمات البرمجية ذات الصلة المشروطة في الجزء العلوي من صفحتك.

62
00:05:26,700 --> 00:05:31,530
لذلك، أنا ذاهب للذهاب في والكتابة أدناه نافبار هنا،

63
00:05:31,530 --> 00:05:34,455
وأنا ذاهب لوضع في التعليمات البرمجية لمشروط هناك.

64
00:05:34,455 --> 00:05:36,080
لذلك لإنشاء مشروط،

65
00:05:36,080 --> 00:05:43,400
سأبدأ بقول div ID تسجيل الدخول مشروط.

66
00:05:43,400 --> 00:05:48,355
لذلك، نعطي معرفًا لهذا المشروط بحيث يمكن تشغيله من

67
00:05:48,355 --> 00:05:53,895
رابط navbar ثم الطبقة كـ «تتلاشى مشروط».

68
00:05:53,895 --> 00:05:56,910
لذلك ترى أن الطبقة مشروط وتتلاشى يعني

69
00:05:56,910 --> 00:06:00,220
أنه عندما يتم جلب مشروط على الشاشة،

70
00:06:00,220 --> 00:06:07,185
فإنه سوف تتلاشى على الشاشة والدور هو كمربع حوار.

71
00:06:07,185 --> 00:06:11,625
لذلك، مما يعني أنه يتم عرضه على أعلى الصفحة.

72
00:06:11,625 --> 00:06:14,195
دعونا نغلق div من الجزء.

73
00:06:14,195 --> 00:06:18,415
حتى داخل هنا، ونحن في طريقنا إلى إنشاء مشروط.

74
00:06:18,415 --> 00:06:28,510
لذلك، في هناك، سأقوم بإنشاء div الثاني مع الفصل كمربع حوار مشروط ثم في

75
00:06:28,510 --> 00:06:32,620
الداخل هنا سوف نحدد محتوى

76
00:06:32,620 --> 00:06:39,550
الوسائط الفعلية هنا ونغلق div.

77
00:06:39,550 --> 00:06:45,220
وهكذا، وهذا هو أن يكون محتوى مشروط سيتم تنظيمه هنا.

78
00:06:45,220 --> 00:06:51,370
لذلك، داخل هذا الحوار المشروط سنقوم بإنشاء div آخر مع

79
00:06:51,370 --> 00:07:00,770
محتوى مشروط الفئة

80
00:07:00,770 --> 00:07:10,350
وإغلاق div وسيحتوي مشروط نموذجي على رأس مشروط.

81
00:07:10,350 --> 00:07:14,255
لذلك، هذا هو المكان الذي ستستضيف فيه div التالي.

82
00:07:14,255 --> 00:07:23,635
ثم هيئة مشروط

83
00:07:23,635 --> 00:07:28,980
التي سوف تحتوي على الكثير من المحتوى ذات الصلة مشروط.

84
00:07:28,980 --> 00:07:34,835
كل هذه الأقسام من الوسائط اختيارية،

85
00:07:34,835 --> 00:07:38,020
ولكن على الأقل يجب أن يكون لديك قسم واحد من هذا القبيل في مشروط الخاص بك

86
00:07:38,020 --> 00:07:41,645
وإلا فإنه لا معنى لإنشاء مشروط هناك.

87
00:07:41,645 --> 00:07:46,455
لذلك، مع هذا، فإن هيكل مشروط جاهز الآن.

88
00:07:46,455 --> 00:07:50,550
لذلك، نحن ذاهبون للذهاب في وملء المحتوى في هذا مشروط.

89
00:07:50,550 --> 00:07:54,005
حتى الآن، نحن بحاجة إلى تحديد ما يذهب إلى مشروط.

90
00:07:54,005 --> 00:07:57,505
الآن، في الرأس نحن ذاهبون لوضع في زر،

91
00:07:57,505 --> 00:08:01,770
عبر زر في مشروط والتي عند النقر عليها سوف رفض مشروط.

92
00:08:01,770 --> 00:08:05,715
هذه هي الطريقة المعتادة التي تم بها تصميم الوسائط.

93
00:08:05,715 --> 00:08:08,805
وسيحتوي الجسم المشروط نفسه على النموذج.

94
00:08:08,805 --> 00:08:12,610
الآن، يمكن أن يحتوي المشروط على أي شيء تريده، لذلك

95
00:08:12,610 --> 00:08:16,040
على سبيل المثال، إذا

96
00:08:16,040 --> 00:08:19,630
قمت بالنقر فوق صورة في معرض الصور وتريد إظهار الحجم الأكبر للصورة،

97
00:08:19,630 --> 00:08:24,415
حتى هناك يمكنك استخدام مشروط لعرض المعلومات.

98
00:08:24,415 --> 00:08:26,280
الآن في هذا التمرين،

99
00:08:26,280 --> 00:08:31,765
سنقوم باستخدام الوسائط لاستضافة نموذج يظهر للمستخدم.

100
00:08:31,765 --> 00:08:35,695
حسنا، الآن، في رأس مشروط،

101
00:08:35,695 --> 00:08:40,175
ونحن ذاهبون لتقديم زر مع

102
00:08:40,175 --> 00:08:49,170
زر نوع والطبقة إغلاق.

103
00:08:49,170 --> 00:08:59,080
لذلك، ترى أن هذا هو الزر الذي يستخدم لإغلاق مشروط ومن ثم سوف تقول،

104
00:08:59,080 --> 00:09:04,685
رفض البيانات ثم مشروط.

105
00:09:04,685 --> 00:09:07,180
لذلك، ما يعنيه هذا هو أن هذا الزر معين

106
00:09:07,180 --> 00:09:09,845
عند النقر عليه سوف يرفض مشروط من الشاشة.

107
00:09:09,845 --> 00:09:18,700
وهذا الزر، وأنا ذاهب لاستخدام الأوقات،

108
00:09:21,100 --> 00:09:24,900
وسوف تظهر كالصليب في الوسائط هنا.

109
00:09:24,900 --> 00:09:27,380
لذا أود أن أقول مرات هنا

110
00:09:27,380 --> 00:09:30,549
قبل هذا الزر، سنقوم بتقديم

111
00:09:30,549 --> 00:09:36,470
رأس سنعرضه في رأس الوسائط لذلك

112
00:09:36,470 --> 00:09:46,180
سأبدأ بـ h4 مع عنوان مشروط للفئة.

113
00:09:46,180 --> 00:09:48,635
ثم داخل هذا h4،

114
00:09:48,635 --> 00:09:52,200
وسوف تشمل عنوان مشروط،

115
00:09:52,200 --> 00:09:56,995
وهو تسجيل الدخول لأن هذا سوف تظهر نموذج تسجيل الدخول.

116
00:09:56,995 --> 00:10:01,625
الآن بعد أن وضعنا بعض التفاصيل في هذا المشروط،

117
00:10:01,625 --> 00:10:06,110
دعنا نضيف الرابط إلى شريط التنقل الخاص بنا والذي

118
00:10:06,110 --> 00:10:07,770
سيؤدي إلى تشغيل هذا المشروط ومن ثم

119
00:10:07,770 --> 00:10:11,515
سنلقي نظرة سريعة على كيفية ظهور الوسائط على الشاشة.

120
00:10:11,515 --> 00:10:14,280
الذهاب إلى شريط التنقل،

121
00:10:14,280 --> 00:10:16,095
مباشرة بعد أول هنا،

122
00:10:16,095 --> 00:10:17,845
وأنا ذاهب إلى تضمين في

123
00:10:17,845 --> 00:10:22,910
رابط التي يمكن استخدامها لتحريك إظهار وإخفاء مشروط.

124
00:10:22,910 --> 00:10:31,080
لذلك للقيام بذلك، سوف أذهب في واستخدام فترة مع نص نافبار الطبقة.

125
00:10:31,080 --> 00:10:37,950
هذا ما يسمح لي بتضمين رابط في شريط التنقل وإظهاره كنص.

126
00:10:37,950 --> 00:10:39,995
لذلك، داخل الامتداد،

127
00:10:39,995 --> 00:10:45,345
سأستخدم A مع تبديل البيانات،

128
00:10:45,345 --> 00:10:50,010
حتى تتمكن من رؤية تبديل بيانات جافا سكريبت القادمة

129
00:10:50,010 --> 00:10:55,400
وتبديل البيانات هو لهدف مشروط ثم هدف البيانات.

130
00:10:55,400 --> 00:11:03,940
تتذكر أننا قد أعطينا المعرف كمشروط تسجيل الدخول إلى مشروط-

131
00:11:04,170 --> 00:11:06,460
مشروط الذي قمنا بتضمينه.

132
00:11:06,460 --> 00:11:11,950
لذلك، سأستخدم ذلك كهدف بياناتي مع التجزئة أمام ذلك.

133
00:11:11,950 --> 00:11:15,815
وداخل هنا، وسوف أذهب في واستخدام

134
00:11:15,815 --> 00:11:24,520
رمز الخط رهيبة لتسجيل الدخول.

135
00:11:24,520 --> 00:11:28,710
لذلك، هذا هو الخط رهيبة «فا تسجيل الدخول»

136
00:11:28,800 --> 00:11:37,945
رمز ويقول تسجيل الدخول وإغلاق التكنولوجيا الإلكترونية.

137
00:11:37,945 --> 00:11:43,975
لذلك مع ذلك، دعونا حفظ التغييرات ونلقي نظرة على صفحة الويب.

138
00:11:43,975 --> 00:11:47,265
الذهاب إلى صفحة الويب الخاصة بنا في المتصفح،

139
00:11:47,265 --> 00:11:50,530
ترى الآن أنه على الحافة اليمنى،

140
00:11:50,530 --> 00:11:56,680
ترى تسجيل الدخول هذا مع هذا الرمز الذي تم إنشاؤه هناك.

141
00:11:56,680 --> 00:12:00,850
لذلك هذا هو الرابط الذي سيؤدي إلى عرض الوسائط.

142
00:12:00,850 --> 00:12:02,530
حتى إذا قمت بالنقر على هذا الرابط،

143
00:12:02,530 --> 00:12:05,015
ثم مشروط سوف تظهر على الشاشة.

144
00:12:05,015 --> 00:12:08,500
لذلك لاحظ أنه عندما أنشأنا هذا مشروط قلنا،

145
00:12:08,500 --> 00:12:14,565
رأس الذي يحتوي على تسجيل الدخول ثم أيضا هذا الزر ثم الجسم،

146
00:12:14,565 --> 00:12:17,605
فارغة حاليا، ونحن في طريقنا لتقديم المزيد من التعليمات البرمجية في هناك.

147
00:12:17,605 --> 00:12:20,860
الآن إذا قمت بالنقر فوق هذا الزر سوف تختفي مشروط.

148
00:12:20,860 --> 00:12:23,170
انقر على ذلك مرة أخرى، يتم عرض مشروط.

149
00:12:23,170 --> 00:12:25,470
حتى إذا قمت بالنقر فوق خارج مشروط، سوف تختفي مشروط.

150
00:12:25,470 --> 00:12:30,985
لذلك هذا هو سلوك المشروط الذي وصلنا إلى توقعه.

151
00:12:30,985 --> 00:12:36,275
الآن، في الخطوة التالية أنا ذاهب للذهاب في وتقديم النموذج هنا.

152
00:12:36,275 --> 00:12:39,990
لن أشرح تفاصيل النموذج لأنك قد

153
00:12:39,990 --> 00:12:43,924
درست بالفعل النماذج في أحد الدروس السابقة.

154
00:12:43,924 --> 00:12:47,830
لذلك أنا مجرد الذهاب ببساطة في ولصق رمز النموذج

155
00:12:47,830 --> 00:12:52,370
وبعد ذلك سوف نلقي نظرة على النموذج في مشروط هنا.

156
00:12:52,370 --> 00:12:54,505
العودة إلى التعليمات البرمجية،

157
00:12:54,505 --> 00:12:57,640
يمكنك الآن أن ترى أنه في الجسم مشروط،

158
00:12:57,640 --> 00:13:01,115
لقد ملأت في نموذج.

159
00:13:01,115 --> 00:13:07,850
ثم لدي مجموعتين نموذجيتين هنا مع إدخال مع نوع البريد الإلكتروني

160
00:13:07,850 --> 00:13:14,795
وكلمة مرور نوع الإدخال ثم لدي مربع اختيار هنا لدي.

161
00:13:14,795 --> 00:13:21,970
لذا، يجب أن يكون هذا سهلاً بالنسبة لك لفك شفرة ما هو هذا النموذج،

162
00:13:21,970 --> 00:13:26,505
من فهمك لكيفية تصميم نماذج Bootstrap.

163
00:13:26,505 --> 00:13:28,250
لقد وضعت في اثنين من الأزرار.

164
00:13:28,250 --> 00:13:33,060
واحد هو زر إرسال وآخر هو زر إلغاء.

165
00:13:33,060 --> 00:13:36,440
يحتوي زر الإلغاء على الزر الأول.

166
00:13:36,440 --> 00:13:41,580
يحتوي زر الإلغاء هنا على نموذج رفض البيانات.

167
00:13:41,580 --> 00:13:45,215
مما يعني أنه عند النقر على زر الإلغاء، سيتم رفض النموذج.

168
00:13:45,215 --> 00:13:50,170
والآخر هو زر الإرسال الذي يستخدم لتقديم النموذج.

169
00:13:50,170 --> 00:13:51,480
لذلك مع هذه التغييرات،

170
00:13:51,480 --> 00:13:55,550
دعونا حفظ التغييرات ومن ثم الذهاب وإلقاء نظرة على صفحة الويب لدينا.

171
00:13:55,550 --> 00:13:57,205
بالعودة إلى صفحة الويب،

172
00:13:57,205 --> 00:14:04,045
يمكنك الآن النقر على تسجيل الدخول ثم سترى نموذجًا للمستخدم لتسجيل الدخول.

173
00:14:04,045 --> 00:14:07,025
لذا سترى أن لديك صندوقين هنا

174
00:14:07,025 --> 00:14:09,850
مربعات الإدخال هنا لإدخال البريد الإلكتروني وكلمة المرور،

175
00:14:09,850 --> 00:14:12,870
ثم مربع اختيار ليقول تذكر لي.

176
00:14:12,870 --> 00:14:15,320
ومن ثم لديك علامة الدخول وإلغاء.

177
00:14:15,320 --> 00:14:17,860
حتى إذا قمت بالنقر فوق إلغاء مشروط سوف تذهب بعيدا.

178
00:14:17,860 --> 00:14:20,710
تماما مثل عند النقر على الصليب هناك.

179
00:14:20,710 --> 00:14:23,915
ثم إذا قمت بملء هذه المعلومات واستمر في النقر على تسجيل

180
00:14:23,915 --> 00:14:26,120
الدخول، يجب بدء عملية تسجيل الدخول.

181
00:14:26,120 --> 00:14:29,885
في هذه اللحظة ليس لدينا خادم لهذا العمل،

182
00:14:29,885 --> 00:14:34,640
ولكن أنا فقط تظهر لك في Bootstrap كيف يمكنك إنشاء نموذج مثل هذا.

183
00:14:34,640 --> 00:14:37,240
أنا متأكد من أنك قد رأيت أشياء مثل هذه على

184
00:14:37,240 --> 00:14:40,610
العديد من المواقع حيث عند النقر على زر تسجيل الدخول

185
00:14:40,610 --> 00:14:43,220
شيء من هذا القبيل مع النموذج للملوثات العضوية الثابتة على الشاشة

186
00:14:43,220 --> 00:14:46,585
ويتوقع منك كتابة المعلومات.

187
00:14:46,585 --> 00:14:50,160
حتى الآن سترى كيف يمكنك الاستفادة من النماذج لعرض

188
00:14:50,160 --> 00:14:54,740
معلومات تراكب صفحة الويب الخاصة بك.

189
00:14:54,740 --> 00:14:57,910
مع هذا نكمل هذا التمرين.

190
00:14:57,910 --> 00:15:01,950
في هذا التمرين، شهدنا استخدام تلميحات الأدوات

191
00:15:01,950 --> 00:15:06,835
وشهدنا استخدام النماذج لعرض المحتوى.

192
00:15:06,835 --> 00:15:14,200
هذا هو الوقت المناسب بالنسبة لك للقيام git-commint مع نصائح أداة الرسالة والنماذج.