סביבת הפיתוח: מריצים ומשנים אתר

ניצור ונריץ אתר ב־Visual Studio או ב־VS Code, נכיר את הקבצים ונשנה את התוכן. נשמור, נריץ ונראה את התוצאה בדפדפן.

חזרה: הדף הראשון שלי

מה נלמד

• להריץ אתר מקומי ב־Windows או ב־macOS.
• לזהות את Pages ואת wwwroot.
• לערוך HTML, לשמור קבצים ולבדוק את התוצאה בדפדפן.

מתחילים כאן: יוצרים פרויקט בפעם הראשונה

עד עכשיו יצרתם קובץ HTML שפתחתם בדפדפן. כעת ניצור פרויקט Razor Pages בסביבת הפיתוח שנבחר. אין צורך בפרויקט מוכן. בשיעורים הקרובים תנסו תוכן ועיצוב; אחרי Bootstrap תלמדו לשמור גרסאות ב־Git.

בחרו את סביבת הפיתוח שלכם ובצעו אחד משני המדריכים עד סופו:

חזרו לכאן כשיש לכם אתר שפועל בדפדפן עם הכותרת ששיניתם. אם כבר השלמתם את ההקמה, המשיכו עם הפרויקט הקיים.

ממשיכים עם הפרויקט שיצרנו

1. פותחים את העבודה הקיימת

ב־VS Code פתחו את תיקיית הפרויקט בשם שבחרתם באמצעות File → Open Folder. ב־Visual Studio פתחו את קובץ הפתרון בשם שבחרתם, למשל GuysRazor.slnx או GuysRazor.sln, מתוך תיקיית הפתרון שלכם. אל תפעילו שוב את פקודת יצירת הפרויקט.

במפגשים הבאים פתחו את אותה תיקייה, שמרו את הקבצים והריצו את האתר כדי לראות מאיזה מצב ממשיכים.

2. עורכים את האתר שלנו

השאירו את הדפדפן לצד העורך. ב־Visual Studio הפעילו את פרופיל http. ב־VS Code פתחו טרמינל בתיקייה שמכילה את קובץ ה־.csproj והריצו:

dotnet watch --launch-profile http

בקטע הבא נתאים את דף הבית ואת התבנית המשותפת לעברית. בדוגמאות כאן RazorTaba הוא שם תיקיית הפרויקט הפנימית. אם בחרתם שם אישי ב־Visual Studio, החליפו את החלק הזה בשם שלכם: למשל GuysRazor/Pages/Index.cshtml. הנתיב מתחיל מתיקיית הפתרון החיצונית. הקבצים כבר נוצרו בהקמה; כעת עורכים אותם.

צרו בתוך RazorTaba/wwwroot תיקייה בשם images והעתיקו אליה את fox.svg ששמרתם בתיקיית first-page בשיעור הקודם. כך התמונה שבדף הבית תימצא בנתיב RazorTaba/wwwroot/images/fox.svg.

3. שומרים ובודקים

בצעו את שינויי הקוד שבהמשך, שמרו את הקבצים ובדקו את האתר. נסו לשנות כותרת או פסקה, שמרו שוב וראו מה השתנה. אם ניסוי לא הצליח, קראו את השגיאה והשוו את הקטע ששיניתם לדוגמה.

השינויים בקוד

RazorTaba/Pages/Index.cshtml

פתחו את RazorTaba/Pages/Index.cshtml הקיים והחליפו את תוכנו בתוכן הבא:

@page
@model IndexModel
@{
    ViewData["Title"] = "בית";
}
<h1>החיות שלי</h1>
<p>זה האתר הראשון שלי. כאן אכיר לכם חיות שמסקרנות אותי.</p>
<img src="~/images/fox.svg" alt="איור של שועל" width="180" />

RazorTaba/Pages/Shared/_Layout.cshtml

פתחו את RazorTaba/Pages/Shared/_Layout.cshtml הקיים והחליפו את תוכנו בתוכן הבא:

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>@ViewData["Title"] — החיות שלי</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.rtl.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
</head>
<body>
    <header class="site-header">
        <nav class="container py-3 d-flex gap-3 align-items-center flex-wrap" aria-label="ניווט ראשי">
            <a class="brand" asp-page="/Index">🐾 החיות שלי</a>
            <a asp-page="/Index">בית</a>
        </nav>
    </header>
    <main class="container py-4">
        @RenderBody()
    </main>
    <footer class="container py-4">אתר של סקרנות, למידה ואכפתיות לבעלי חיים.</footer>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

RazorTaba/wwwroot/css/site.css

פתחו בפרויקט שלכם את wwwroot → css → site.css. זהו קובץ העיצוב שאליו קישרנו מתוך _Layout.cshtml. התבנית יצרה בו כמה כללי עיצוב; כעת החליפו את כל תוכנו בשתי השורות הבאות ושמרו:

/* נשנה את העיצוב בשיעור CSS. */
body { font-family: Arial, sans-serif; }

השורה הראשונה היא הערה שאינה משנה את הדף. השורה השנייה בוחרת גופן לטקסט שבגוף הדף. אם Arial אינו זמין במחשב, הדפדפן יבחר גופן ממשפחת sans-serif.

בדקו שב־site.css נשארו רק שתי השורות האלה. שמרו ורעננו את האתר: הכותרת, הפסקה והתמונה עדיין מופיעות, והטקסט משתמש בגופן שהגדרתם.

RazorTaba/Program.cs

פתחו את RazorTaba/Program.cs הקיים והחליפו את תוכנו בתוכן הבא:

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();

var app = builder.Build();
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}
app.UseStaticFiles();
app.UseRouting();
app.MapRazorPages();
app.Run();

RazorTaba/Properties/launchSettings.json

פתחו את RazorTaba/Properties/launchSettings.json הקיים והחליפו את תוכנו בתוכן הבא:

{
  "profiles": {
    "http": {
      "commandName": "Project",
      "launchBrowser": true,
      "applicationUrl": "http://localhost:5186",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "https": {
      "commandName": "Project",
      "launchBrowser": true,
      "applicationUrl": "https://localhost:7186;http://localhost:5186",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

מריצים ובודקים

1. האתר נפתח ב־http://localhost:5186.
2. הכותרת והפסקה מופיעות בעברית והתמונה נטענת.
3. שמרו שינוי נוסף, הריצו וודאו שהוא מופיע.
4. עצרו את ההרצה, פתחו שוב את אותו פרויקט והריצו אותו.

משימה אישית ובדיקת הבנה

שנו משפט אחד והסבירו באיזה קובץ ערכתם אותו ואיך בדקתם את התוצאה.

שמרו את הקבצים והראו את האתר פועל. רשמו לעצמכם היכן נמצאת תיקיית הפרויקט כדי שתוכלו לפתוח אותה במפגש הבא.

AI יכול לעזור להבין הודעת שגיאה ולנפות תקלה. אתם אחראים לכתוב, לבדוק ולהסביר את הקוד; אין להפעיל סוכן שיכתוב את הפרויקט.

המשך

• האתר הופך לשלי