Tworzenie nowego projektu
Jeżeli ostatnio programowałeś razem ze mną, to przejdź proszę do solucji, którą wtedy stworzyliśmy (jeżeli jej nie masz, to stwórz nową solucję w visual studio). Od razu na początek dodajmy sobie nowy projekt do tej solucji, tym razem będzie to projekt ASP.NET Core.
Także wybieramy tutaj ASP.NET Core Web App (Model-View-Controller). Kliknij przycisk Next, wybierz odpowiednią nazwę. Zgodnie z naszą wcześniej ustaloną konwencją będzie to: Calculator.AspNetCoreApp.
Kliknij Next. Następnie wybierz framework, najlepiej wybrać obecnie najnowszą wersję, czyli .NET 5.0. Autoryzacji, na razie nie potrzebujemy.
Kliknij Create, po czym zostanie dodany nowy projekt do naszej solucji.
Uruchomienie projektu
Na początek ustawmy ten projekt, jako nasz projekt startowy i możemy spróbować go uruchomić w przeglądarce (polecam Chrome).
Uruchom poprzez: CTRL+F5.
Tak wygląda w tym momencie nasza aplikacja. Nie dodaliśmy żadnej linijki kodu, a tutaj już mamy jakiś szablon gotowy. Także, myślę że nasz kalkulator po prostu będzie na tym oknie głównym, także zaraz sobie go zmodyfikujemy.
Implementacja widoku głównego
Przejdź proszę w Visual Studio do okna Solution Explorer, a następnie do folderów Views → Home → Index.
Tak wygląda kod tego pliku:
@{
ViewData["Title"] = "Home Page";
}
<div class="text-center">
<h1 class="display-4">Welcome</h1>
<p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>To jest właśnie nasze okno główne. Będziemy ten kod zmieniać, także możemy usunąć obecny kod. Ustawimy sobie tylko tytuł kalkulator.
@{
ViewData["Title"] = "Kalkulator";
}Dodatkowo możemy jeszcze w layoucie też wpisać, że to jest kalkulator, tak żeby tam nie było jakichś wyświetlanych dziwnych nazw.
<title>@ViewData["Title"] – Kalkulator</title>Tak samo w layoucie poprawmy oznaczeniu linka do naszej strony głównej:
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Kalkulator</a>Także, jeżeli to teraz przebuduję (CTRL+SHIFT+B) i przejdę z powrotem do przeglądarki. Odświeżę (SHIFT+F5), to w tym momencie tak wygląda nasza aplikacja.
Będziemy tutaj chcieli na środku wyświetlić w przeglądarce kalkulator. Także przejdźmy ponownie do widoku Index.cshtml. Tutaj w Razor'ze za pomocą HTML'a, CSS'a i przede wszystkim też Bootstrap'a stworzymy nowy widok. Dodajmy sobie najpierw div'a, w którym będzie cały ten nasz kalkulator. Skorzystamy tutaj z Bootstrap'owej klasy card. Dodamy sobie też margines z góry, żeby to lepiej troszkę wyglądało.
@{
ViewData["Title"] = "Kalkulator";
}
<div class="card mt-5">
</div>Na początek wyświetlimy TextBox'a i skorzystamy z helpera Html.TextBox.
<div class="card mt-5">
@Html.TextBox("ScreenInput", null, new { @class = "calculator-screen", disabled = "disabled" })
</div>Jako parametry przekażemy nazwę, czyli ScreenInput, a także nową klasę calculator-screen, którą chcemy przypisać do tego TextBox'a. Także tę klasę sobie za chwilę utworzymy w CSS. Ustawmy też właściwość disabled, tak żeby był on tylko read-only. Tak może wyglądać ten TextBox. Za chwilę w CSS'ie będziemy ustawiać style dla klasy, którą tutaj użyliśmy. Może przejść sobie od razu do głównego pliku CSS site.css.
Na dole dodajmy sobie już naszą klasę i za chwilę uzupełnimy w tym miejscu style.
.calculator-screen {
}Zobaczmy jak w tym momencie, wygląda nasza aplikacji. Uruchom aplikację i przejdź do przeglądarki. Odśwież i zauważ, że na ekranie pojawił się input.
Wróćmy do widoku Index. Możemy też tutaj wpisać jakieś testowe dane do TextBox'a (inputa), które nam później pomogą przy wprowadzaniu styli. Będziemy od razu mogli zweryfikować czy te liczby wyświetlają się prawidłowo.
<div class="card mt-5">
@Html.TextBox("ScreenInput", "31321312312314", new { @class = "calculator-screen", disabled = "disabled" })
</div>Co dalej? Oczywiście potrzebujemy przyciski, także dodamy sobie poniżej TextBox'a kolejnego diva'a. A wewnątrz będziemy dodawać przyciski.
<div class="card mt-5">
@Html.TextBox("ScreenInput", "31321312312314", new { @class = "calculator-screen", disabled = "disabled" })
<div>
</div>
</div>Także potrzebujemy znowu tak jak poprzednio 17 przycisków. Na górze będzie cyfra 7.
<button type="button">7</button>Tak, żeby to od razu ładnie wyglądało dodajmy kilka klas Bootstrap'owych. Czyli btn i bg-success.
<button type="button" class="btn bg-success">7</button>Zobaczymy jak ten przycisk wygląda.
Super, o takie przyciski nam chodziło, później jeszcze dopasujemy tylko rozmiar i będzie to bardzo dobrze wyglądało. Także dodajmy najpierw wszystkie przyciski, a następnie uzupełnimy style. Także potrzebujemy 17 takich przycisków.
@{
ViewData["Title"] = "Kalkulator";
}
<div class="card mt-5">
@Html.TextBox("ScreenInput", "31321312312314", new { @class = "calculator-screen", disabled = "disabled" })
<div>
<button type="button" class="btn bg-success">7</button>
<button type="button" class="btn bg-success">8</button>
<button type="button" class="btn bg-success">9</button>
<button type="button" class="btn bg-success">/</button>
<button type="button" class="btn bg-success">+</button>
<button type="button" class="btn bg-success">4</button>
<button type="button" class="btn bg-success">5</button>
<button type="button" class="btn bg-success">6</button>
<button type="button" class="btn bg-success">-</button>
<button type="button" class="btn bg-success">1</button>
<button type="button" class="btn bg-success">2</button>
<button type="button" class="btn bg-success">3</button>
<button type="button" class="btn bg-success">*</button>
<button type="button" class="btn bg-success">=</button>
<button type="button" class="btn bg-success">0</button>
<button type="button" class="btn bg-success">,</button>
<button type="button" class="btn bg-success">C</button>
</div>
</div>Podobnie jak to robiliśmy w poprzedniej aplikacji, najpierw w pierwszym wierszu mamy: "7", "8", "9", "/" i "+". W drugim "4", "5", "6" i "-". W trzecim "1", "2", "3", "*" i "=" oraz w ostatnim "0", "," i "C". Żeby to było lepiej widoczne, to jeszcze dodałem odpowiednie formatowanie. Dobrze byłoby jeszcze dopasować przyciski kolorystycznie. To znaczy, nasze liczby będą koloru zielonego, ale operacje możemy już zrobić innego koloru. Mogą być takie może lekko szarawe, także tam, gdzie mam operację, to zamiast klasy bg-success użyjemy klasy bg-secondary dla wszystkich operacji. Tak samo zmienimy kolor dla przycisku clear, może to być przycisk czerwony, użyjemy klasy bg-danger. Tak samo, jak wcześniejsze, jest również klasa Bootstap'owa. Na koniec dla wyniku może możemy ustawić kolor niebieski, czyli klasę bg-primary.
<div class="card mt-5">
@Html.TextBox("ScreenInput", "31321312312314", new { @class = "calculator-screen", disabled = "disabled" })
<div>
<button type="button" class="btn bg-success">7</button>
<button type="button" class="btn bg-success">8</button>
<button type="button" class="btn bg-success">9</button>
<button type="button" class="btn bg-secondary">/</button>
<button type="button" class="btn bg-secondary">+</button>
<button type="button" class="btn bg-success">4</button>
<button type="button" class="btn bg-success">5</button>
<button type="button" class="btn bg-success">6</button>
<button type="button" class="btn bg-secondary">-</button>
<button type="button" class="btn bg-success">1</button>
<button type="button" class="btn bg-success">2</button>
<button type="button" class="btn bg-success">3</button>
<button type="button" class="btn bg-secondary">*</button>
<button type="button" class="btn bg-primary">=</button>
<button type="button" class="btn bg-success">0</button>
<button type="button" class="btn bg-success">,</button>
<button type="button" class="btn bg-danger">C</button>
</div>
</div>Także zobaczymy jak te nasze przyciski teraz wyglądają po uruchomieniu aplikacji.
Ok, czyli mamy tutaj liczby koloru zielonego. Operację są szare, przycisk clear jest czerwony i znak równości jest niebieski. Wygląda na to, że mamy wszystkie przyciski, które potrzebujemy. Kolejnym krokiem będzie odpowiednie ustawienie tych przycisków, aby faktycznie wyglądało to, jak kalkulator. Przede wszystkim potrzebujemy ustawić klasę dla tego div'a ,w którym mamy wszystkie przyciski.
<div class="calculator-btns">Skopiujmy ją do site.css.
.calculator-btns {
}Spróbujmy dostosować te style. Zacznijmy od TextBoxa. Ustawimy mu kilka właściwości.
.calculator-screen {
height: 100px;
text-align: right;
padding: 0 20px 0 20px;
margin: 20px 20px 0 20px;
font-size: 5rem;
color: #000;
border: 2px solid black;
}Wysokość ustawiłem na 100 pikseli. Tekst będzie wyrównany do prawej strony, tak jak to często jest w kalkulatorach. Ustawiłem też padding, tak żeby sam tekstt był trochę dalej od krawędzi. Będzie to 0, 20 pikseli, 0 i 20 pikseli. Czyli padding z prawej i z lewej 20 pikseli, z góry i z dołu będzie 0. Ustawiłem również margin, tylko tym razem z góry 20 pikseli, tak samo z lewej oraz z prawej strony, a z dołu będzie 0. Fontsize na 5 rem, tak żeby tekstt był dobrze widoczny na każdym ekranie. Kolor czcionki czarny i obramowanie 2 piksele solid i również czarnego koloru. Zobaczmy, jak ten TextBox teraz wygląda. Uruchom aplikację SHIFT+F5.
TextBox wygląda już całkiem dobrze. Teraz tylko jeszcze dopasujmy przyciski. Wróć do pliku ze stylami site.css i dodamy również odpowiednie właściwości dla wszystkich przycisków:
button {
height: 70px;
font-size: 2rem !important;
color: #fff !important;
}Czyli ustawiłem dla każdego przycisku odpowiednią wysokość, rozmiar i kolor czcionki. Wysokość to będzie 70 pikseli, rozmiar czcionki 2 rem i kolor czcionki biały. Przy okazji użyłem tutaj słowa important, tak aby nadpisać te style Bootstrap'owe. Zobaczmy, jak teraz to wygląda.
Jest już lepiej, ale to jeszcze nie jest efekt, którego oczekujemy. Za chwilę jeszcze dopasujemy szerokość dla wszystkich przycisków. Wróćmy do pliku ze stylami. Potrzebujemy właśnie w głównym div'ie, czyli w klasie calculator-btns ustawić kilka właściwości.
.calculator-btns {
display: grid;
grid-gap: 20px;
padding: 20px;
}Przede wszystkim potrzebujemy wyświetlić te przyciski jako siatka, czyli dla właściwości display ustawiamy grid. Ustawimy sobie również grid-gap żeby zrobić przerwy między przyciskami na 20 pikseli i padding również na 20 pikseli i teraz to już powinno całkiem dobrze wyglądać. Zobaczmy.
Tak wygląda teraz ten kalkulator, nie jest to jeszcze dalej widok, którego oczekujemy, także musimy dodać jeszcze kilka zmian, żeby to wyglądało faktycznie jak siatka. Po pierwsze dodajmy dla przycisku dodawania odpowiednią klasę. Niech to będzie klasa add-button.
<button type="button" class="btn bg-secondary add-button">+</button>Następnie dodajmy kilka właściwości dla tej klasy w pliku site.css
.add-button {
height: 100%;
grid-area: 1 / 5 / 3 / 5;
}Chcemy, żeby ten przycisk zajmował dwa miejsca w tej siatce. Możemy to zrobić dzięki właściwości grid-area. To znaczy, chcemy żeby był w 1 wierszu i w kolumnie 5, dzięki czemu ta siatka już będzie lepiej ustawiona i chcemy także, żeby kończył się w 3 wierszu i w 5 kolumnie. Czyli przypisujemy do tej właściwości 1 / 5 / 3 / 5. Ponadto ustawmy wysokość tego przycisku na 100%. Przebudujmy projekt i przejdźmy jeszcze raz do przeglądarki. Teraz już powinno to dużo lepiej wyglądać.
Jak widzisz, teraz już ten plus wygląda całkiem dobrze. Przy okazji pozostałe przyciski dopasowały się do komórek w naszej siatce. Podobny zabieg musimy zrobić dla znaku równości i dla zera. Także dodajmy do tych przycisków znowu odpowiednie klasy i za chwile ustawimy dla nich odpowiednie właściwości w pliku css.
<button type="button" class="btn bg-primary result-button">=</button>
<button type="button" class="btn bg-success zero-button">0</button>Następnie dodajmy takie klasy w pliku site.css
.result-button {
height: 100%;
grid-area: 3 / 5 / 5 / 5;
}
.zero-button {
grid-area: 4 / 1 / 4 / 3;
}Czyli przycisk wyświetlający wynik będzie w wierszu 3, kolumnie 5, rozciągniemy go do wiersza 5 i kolumny 5. Dzięki temu będzie wyświetlany na 2 wiersze i 1 kolumnie. Zostanie ładnie dopasowany do pustej komórki. Również tutaj ustawiamy wysokość na 100%. Natomiast dla zera, to będzie wiersz 4 kolumna 1, wierszu nie rozciągamy, zostaje 4, ale kolumnę poszerzamy tym razem do kolumny 3, Dzięki temu będzie przycisk 0 na 2 kolumny. Przebudujmy ten projekt i przejdźmy do przeglądarki do naszej aplikacji.
Zauważ, że teraz to już bardzo dobrze wygląda. Mamy wszystkie przyciski, tutaj już jest ładnie siatka ustawiona, wszystkie przyciski są idealnie dopasowane. Co więcej, nasza aplikacja jest responsywna, jeżeli teraz sobie zmniejszę ten ekran, to zauważ, że ciągle to wygląda bardzo dobrze.
Także na każdym ekranie, zarówno na dużym telewizorze, czy monitorze, jak i na telefonie, nasza aplikacja będzie dobrze wyglądała. Na koniec możemy sobie usunąć testowe dane z TextBox'a tak, żeby nie przeszkadzały nam w kolejnej lekcji.
@Html.TextBox("ScreenInput", null, new { @class = "calculator-screen", disabled = "disabled" })Myślę, że to będzie wszystko, jeżeli chodzi o widok naszej aplikacji.
Cały kod aplikacji
Index.cshtml
@{
ViewData["Title"] = "Kalkulator";
}
<div class="card mt-5">
@Html.TextBox("ScreenInput", null, new { @class = "calculator-screen", disabled = "disabled" })
<div class="calculator-btns">
<button type="button" class="btn bg-success">7</button>
<button type="button" class="btn bg-success">8</button>
<button type="button" class="btn bg-success">9</button>
<button type="button" class="btn bg-secondary">/</button>
<button type="button" class="btn bg-secondary add-button">+</button>
<button type="button" class="btn bg-success">4</button>
<button type="button" class="btn bg-success">5</button>
<button type="button" class="btn bg-success">6</button>
<button type="button" class="btn bg-secondary">-</button>
<button type="button" class="btn bg-success">1</button>
<button type="button" class="btn bg-success">2</button>
<button type="button" class="btn bg-success">3</button>
<button type="button" class="btn bg-secondary">*</button>
<button type="button" class="btn bg-primary result-button">=</button>
<button type="button" class="btn bg-success zero-button">0</button>
<button type="button" class="btn bg-success">,</button>
<button type="button" class="btn bg-danger">C</button>
</div>
</div>Nowe klasy w site.css
.calculator-screen {
height: 100px;
text-align: right;
padding: 0 20px 0 20px;
margin: 20px 20px 0 20px;
font-size: 5rem;
color: #000;
border: 2px solid black;
}
button {
height: 70px;
font-size: 2rem !important;
color: #fff !important;
}
.calculator-btns {
display: grid;
grid-gap: 20px;
padding: 20px;
}
.add-button {
height: 100%;
grid-area: 1 / 5 / 3 / 5;
}
.result-button {
height: 100%;
grid-area: 3 / 5 / 5 / 5;
}
.zero-button {
grid-area: 4 / 1 / 4 / 3;
}PODSUMOWANIE
Tak może wyglądać widok naszej aplikacji. Dzięki podstawowej znajomości HTML'a CSS'a i Bootstrap'a możesz tworzyć już całkiem dobrze wyglądające aplikacje. Na tę chwilę aplikacja nie ma jeszcze żadnych funkcjonalności, ale tym zajmiemy się w kolejnym artykule. Pokażę Ci wtedy jak za pomocą JavaScript oraz C# zaimplementować logikę kalkulatora.
Jeżeli taki artykuł Ci się spodobał, to koniecznie dołącz do mojej społeczności. Zapisz się na darmowy newsletter, gdzie co tydzień dzielę się wartościowymi materiałami w szczególności dotyczącymi C# i platformy .NET (darmowy zapis – newsletter).
Poprzedni artykuł - Pierwsza Aplikacja Desktopowa WPF w C# – Logika MVVM (2/2).
Następny artykuł - Pierwsza Aplikacja Webowa ASP.NET Core w C# – Logika MVC (2/2).
![[E-Book] Jak Zostać Programistą Od Zera Do Eksperta (PDF)](/content/images/jak-zostac-programista-od-zera-male.png)
![[E-Book] Rekrutacja Programisty C#/.NET (PDF)](/content/images/rekrutacja-programisty-csharp-dotnet.png)