كيف قمت بإنشاء تطبيق الآلة الحاسبة باستخدام Django

في هذا الدرس، سوف نتعلم أطر تطوير الواجهة الأمامية الثلاثة الرئيسية: HTML وCSS وJavaScript من خلال إنشاء تطبيق آلة حاسبة. ثم نتبع ذلك باستخدام Django كواجهة خلفية.

سيكون هذا الدرس لمشروع تطوير الويب الكامل أمرًا مثيرًا للاهتمام. وسوف نتعلم، من بين أمور أخرى:

• كيف يجمع Django بين أطر عمل الواجهة الأمامية لإنشاء صفحة ويب جميلة وتفاعلية.
• كيفية تصميم صفحات الويب باستخدام CSS.
• كيفية التعامل مع جافا سكريبت DOM.

سوف تستفيد كثيرًا من إتقان المعرفة الأساسية بـ HTML وCSS وJavaScript. سأحاول أن أشرح الأمور بأفضل ما أستطيع، ولكن من المتوقع أن يكون لديك معرفة أساسية ببايثون.

الدرس يتكون من ثلاثة أجزاء وهذا الجزء الأول من السلسلة:

•  الجزء الاول: كيف قمت بإنشاء تطبيق الآلة الحاسبة باستخدام Django
• الجزء الثاني: كيف قمت بإنشاء تطبيق الآلة الحاسبة باستخدام Django
• الجزء الثالث: كيف قمت بإنشاء تطبيق الآلة الحاسبة باستخدام Django

HTML

قم بإنشاء مجلد لهذا المشروع. داخل المجلد قم بإنشاء ملف باسم Index.html. سيكون الملف في هذا المجلد في الوقت الحالي. وفي وقت لاحق، سوف نضعه في مكانه الصحيح.

<div class="calculator">

  <input type="text" class="calculator-screen" value="0" disabled />
  
  <div class="calculator-keys">
    
    <button type="button" class="operator" value="+">+</button>
    <button type="button" class="operator" value="-">-</button>
    <button type="button" class="operator" value="*">&times;</button>
    <button type="button" class="operator" value="/">&divide;</button>

    <button type="button" value="7">7</button>
    <button type="button" value="8">8</button>
    <button type="button" value="9">9</button>


    <button type="button" value="4">4</button>
    <button type="button" value="5">5</button>
    <button type="button" value="6">6</button>


    <button type="button" value="1">1</button>
    <button type="button" value="2">2</button>
    <button type="button" value="3">3</button>


    <button type="button" value="0">0</button>
    <button type="button" class="decimal" value=".">.</button>
    <button type="button" class="all-clear" value="all-clear">AC</button>

    <button type="button" class="equal-sign operator" value="=">=</button>

  </div>
</div>

هذا هو كود HTML لتطبيق الآلة الحاسبة. في وقت لاحق، سوف نقوم بتعديل هذا الكود عن طريق إضافة نموذج معياري. في الوقت الحالي، ينصب تركيزنا على تصميم التطبيق. نستخدم علامة div أولاً لتغليف الآلة الحاسبة بأكملها وعلامة div أخرى لتغليف المفاتيح. وهذا يجعل من السهل تطبيق أنماط CSS على جميع العناصر في نفس الوقت.

بالطبع، لا يزال بإمكاننا تطبيق التصميم على العناصر الفردية. لهذا السبب تم تحديد سمات الكلاس.

سيكون وسم input بمثابة شاشة الآلة الحاسبة. تم تعطيله في الوقت الراهن. وهذا يعني أنه سيظل غير قابل للاستخدام حتى تتم إضافة JavaScript. أما &times و&divide هما رمزا الضرب والقسمة في HTML.

لاحظ أن بعض العلامات لها نفس الاسم الذي تم تعيينه كسمات الكلاس. وهذا يجعل من السهل تطبيق أنماط CSS على تلك العناصر.

تحدد سمة value النص الأولي أو الرقم أو الرمز الذي نريد أن يكون في العنصر. وفي بعض الحالات يكون عرضة للتغيير كما نرى في عنصر الإدخال.

تصميم عناصر HTML باستخدام CSS

في هذا القسم، سوف نتعلم كيفية إنشاء تخطيط بسيط للآلة الحاسبة من خلال تطبيق CSS grid. أنشئ ملفًا آخر تحت إسم style.css، واكتب كود CSS التالي.

html {
    font-size: 62.5%;
    box-sizing: border-box;
}


*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

من خلال الكود السابق قمنا بتعيين font-size و box-sizing لكل شيء داخل عنصر html. يتضمن هذا كافة عناصر HTML في القسم السابق. كما قلت سابقًا، سنقوم بإجراء تعديلات على الكود عن طريق إضافة نموذج معياري. في الوقت الحالي، علامة html غير واضحة.

تحدد خاصية تغيير box-sizing الطريقة التي نريد بها حساب عرض العنصر وارتفاعه. من خلال تعيينه على border-box، قمنا بتضمين الحشو والحدود في حساب العرض والارتفاع.

يطبق رمز النجمة (*) التصميم على كافة عناصر HTML. يطلق عليه محدد عالمي. تقوم المحددات ::before و ::after بتطبيق التصميم قبل محتوى العنصر المحدد وبعده. باستخدام الفاصلة، نقوم بدمج محددات متعددة ونوفر على أنفسنا الكثير من الأكواد.

نحن في الواقع نقول إننا نريد أن يتم تعيين الهامش والحشوة لجميع العناصر قبل وبعد على 0، وأن نرث قيمة خاصية border-box للأصل أعلاه (html). هذا للتأكد من أنها لم تعد تزيد مع العرض.

.calculator {
  border: 1px solid #ccc;
  border-radius: 5px;
  position: absolute;
  top: 20%;
  left: 30%;
  width: 400px;
}

هنا يأتي أول استخدام لنا لمحدد الكلاس.

تذكر أنها مخصصة لعلامة div الأولى. قمنا بتعيين لون الحدود باستخدام رمز اللون لجعله رمادي فاتح.

يقوم border-radius بتقريب الزوايا الأربع لعنصر div وفقًا للحجم المحدد.

تحدد خاصية position الطريقة التي نريد وضع العنصر بها في المستند. من خلال تعيينه على absolute، نقوم بإزالته من تدفق المستند العادي ووضعه بالنسبة إلى العنصر الأقرب إليه. نظرًا لعدم إنشاء مساحة للعنصر في تخطيط الصفحة، تحدد قيم الأعلى واليسار موضعه النهائي.

تصميم شاشة الآلة الحاسبة

.calculator-screen {
  width: 100%;
  font-size: 5rem;
  height: 80px;
  border: none;
  background-color: #252525;
  color: #fff;
  text-align: right;
  padding-right: 20px;
 
}

نعطي شاشة الآلة الحاسبة لون خلفية أسود وهو أمر شائع جدًا في العديد من الآلات الحاسبة. على هذا النحو، يتعين علينا ضبط الرقم على اللون الأبيض لجعله مرئيًا.

نقوم أيضًا بزيادة font-size إلى 5rem ثم نقوم بمحاذاة الرقم إلى اليمين.

افتح محرر النصوص، ويفضل أن يكون Visual Studio Code. أنشئ مجلدًا جديدًا وانقل ملفات HTML وCSS إلى المجلد. في calc.html، بمجرد كتابة علامة html والضغط على مفتاح Enter، سيتم إنشاء نموذج معياري كما في المثال الموالي :

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

  </body>
</html>

أضف كود HTML للآلة الحاسبة أسفل عنصر body. ضمن عنصر head، أضف رابطًا إلى ملف CSS الخاص بك.

<link rel="stylesheet" href="styles.css">

بعد حفظ الملف، اضغط على مفاتيح Ctrl + Shift + C لنسخ المسار إلى الملف:

C:\Users\pyarabic\Documents\Templates\invoice_1.html

إفتح المتصفح على ذلك الرابط وسوف ترى التقدم الذي نحرزه في تصميم تخطيط الآلة الحاسبة.

يمكنك أن ترى أن padding هي المساحة الصغيرة بعد 0.

الأزرار

button {
  height: 60px;
  background-color: #fff;
  border-radius: 3px;
  border: 1px solid #c4c4c4;
  background-color: transparent;
  font-size: 2rem;
  color: #333;
  
}

button:hover {
  background-color: #eaeaea;
}

.operator {
  color: #337cac;
}

.all-clear {
  background-color: #f0595f;
  border-color: #b0353a;
  color: #fff;
}

.all-clear:hover {
  background-color: #f17377;
}

.equal-sign {
  background-color: #2e86c0;
  border-color: #337cac;
  color: #fff;
}

.equal-sign:hover {
  background-color: #4e9ed4;
}

لن أشرح كل شيء هنا لتوفير وقت القراءة. يتغير لون الزر كلما قمت بتحريك مفتاح السهم حوله. أصبح هذا ممكنًا باستخدام محدد :hover.

نقوم بتغيير علامات المشغل وAC وعلامة المساواة إلى ألوان مختلفة باستخدام الفئات الخاصة بها. لاحظ أن حواف الأزرار منحنية قليلاً. هذا هو border-radius الذي تم ضبطه على 3 بكسل.

ترتيب الأزرار باستخدام CSS Grid

علامة div التي تحتوي على calculator-keys و من إسمها فهي الحاوية التي تحتوي على الأزرار. لترتيب الأزرار، نحتاج إلى تعيين خاصية العرض الخاصة بها على grid لجعلها حاوية شبكية.

.calculator-keys {
  display: grid;
}

مع ذلك، يمكننا العمل على خصائص أخرى لضبط ذلك حسب النمط الذي نريده.

للقيام بذلك، هناك خصائص CSS يتم استخدامها بمجرد تحديد خاصية grid display. و هي خصائص grid-template rows و grid-template columns المستخدمة لتحديد صفوف وأعمدة حاوية الشبكة.

دعونا نطبقها باستخدام الكلمة الأساسية repeat لتكوين أربعة أعمدة بدلاً من عمود واحد.

.calculator-keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

انظر إلى 1fr باعتباره ربع المساحة الموجودة في حاوية الشبكة. تخطيط الآلة الحاسبة يتشكل تدريجيا. ومع ذلك، فإن الأزرار مزدحمة للغاية. دعونا نبعدهم عن بعضهم البعض باستخدام خصائص grid-gap و padding.

مسافة خاصية grid-gap خارج الأعمدة والصفوف بينما مساحة المساحة المتروكة خارج الحواف.

.calculator-keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  padding: 20px;

}

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

لتحقيق ذلك، نستخدم خصائص grid-row-start و grid-row-end.

إذا قمنا بتعيين grid-row-start لعلامة التساوي على 2، على سبيل المثال، فإنها ستشغل الموضع 7 في الشبكة وهو الصف الثاني من حاوية الشبكة. إذا قمنا أيضًا بتعيين grid-row-end على 6 وجعل الارتفاع 100%، فسوف يمتد لعدة صفوف حتى الصف الأخير.

.equal-sign {
  background-color: #2e86c0;
  border-color: #337cac;
  color: #fff;
  grid-row-start: 2;
  grid-row-end: 6;
  height: 100%;
}

لاحظ أنه بدون تحديد الارتفاع، ستبقى المساحات الفارغة ويتم نقلها معًا بعلامة التساوي إلى العمود الأول. وبالتالي، ساعدت خاصية height على ملء الفراغات. ولكن ليس من المثالي الاحتفاظ بعلامة التساوي على الجانب الأيسر من الآلة الحاسبة.

لحل هذه المشكلة، سوف نستخدم خصائص CSS أخرى، grid-column-start و grid-column-end.

.equal-sign {
  background-color: #2e86c0;
  border-color: #337cac;
  color: #fff;
  grid-row-start: 2;
  grid-row-end: 6;
  height: 100%;
  grid-column-start: 4;
}

على الرغم من أننا لم نحدد grid-column-end، إلا أنها تطبقها تلقائيًا على حاوية الشبكة.

هل يمكنك تخمين ما ستكون القيمة؟ نعم 5 كلامك صحيح لمعرفة القيمة التي ستكون عليها grid-row-end والخصائص الأخرى، تحقق من أدوات المطورين في متصفحك (إذا كان لديه واحدة)، أو يمكنك اختبارها باستخدام أرقام مختلفة.

في هذا الجزء من هذا البرنامج التعليمي للمشروع، تعلمنا أساسيات HTML وCSS. لقد رأينا كيف يمكننا استخدام شبكة CSS لإنشاء تخطيط لتطبيق الآلة الحاسبة.

الكود الكامل لهذا المشروع موجود على صفحتي على GitHub. تطبيق الآلة الحاسبة الخاص بنا ليس نشطًا بعد. نحن بحاجة إلى جافا سكريبت “لإيقاظه” من سباته الطويل. وهذا ما سنفعله في الجزء الثاني من هذه السلسلة.