diff --git a/content/posts/DynamicWebPage/Frontend_Backend.png b/content/posts/DynamicWebPage/Frontend_Backend.png new file mode 100644 index 0000000..bf353c4 Binary files /dev/null and b/content/posts/DynamicWebPage/Frontend_Backend.png differ diff --git a/content/posts/DynamicWebPage/index.md b/content/posts/DynamicWebPage/index.md new file mode 100644 index 0000000..384df52 --- /dev/null +++ b/content/posts/DynamicWebPage/index.md @@ -0,0 +1,30 @@ +--- +title: "Dynamic WebPage" +date: 2023-10-24T10:12:12+08:00 +draft: false +tags: ["Web", "Dynamic"] +--- + +# Before Everything Else: +Remember how last time I promised to update once I learn more? It turned out that the web design contest has two groups: static, and dynamic. I wanted to try do a dynamic website, and oh boy was it a lot to unpack. + +# Static and Dynamic? +According to [wikipedia]("https://en.wikipedia.org/wiki/Static_web_page"), static web page is a web page that is delivered to a web browser exactly as stored, displays the same information for all user, and often stored in a .html file. +A dynamic website, however, is often a web page generated by a web application. Its contents shift based on user inputs, informations. Dynamic websites are combinations of frontend and backend. + +{{< gallery caption-effect="fade" >}} + {{< figure src="posts/dynamicwebpage/Frontend_Backend.png" link="posts/dynamicwebpage/Frontend_Backend.png" caption="How they connect" >}} +{{< /gallery >}} + +# Frontend and Backend? +Frontend is the graphical user interface that we see on a page, the titles, the texts, the buttons and the images, etc. Frontend development is the process of creating those things, usually invoving html, css and javascript. Backend is what the user cannot see, the data-processing, the page-generating and more. It's the logic and mechanisms that happen on web pages. The frontend and backend are connected through http requests. When user say, clicks a button to log in, the a http request is made from frontend to backend, indicating a login is happening, so the server the backend is on can process the request. + +# My Approach? +Since I only knew a bit of C#, I decided to write my backend using just that. C# is, well, not the most popular choice among its candidates like java and others. But it's definitely usable. So I began looking into it, and that was when I found: Razor Pages with asp.net. It's literally magic. Just let me tell you. + +# RazorPage and asp.net +ASP.NET is a open-source web framework developed by microsoft. RazorPage is a new form of web page template ends in .cshtml. From that name you'd probably already have an idea what is does. It has the amazing ablity to embed C# code into html contents. When creating a razor page, a .cshtml.cs file is also created, and inside is where you can write your backend code. Wait, what just happened? Yes, when users are accessing a razor page, the GET and POST methods can directly be handled inside the corresponding .cshtml.cs file! With such power, I could become a "full-stack" web developer in just days! + +# Result +After trying it out, I was able to create a site diplaying coffee. I implemented a log in mechanism, and yes, I had to rent a linux server. In my case, I used Apache as my web server, and created a mysql server for storing the user data. +`` \ No newline at end of file diff --git a/public/404.html b/public/404.html index d53ddf6..511a0e2 100644 --- a/public/404.html +++ b/public/404.html @@ -6,6 +6,7 @@ + @@ -45,7 +46,7 @@ - + @@ -59,7 +60,7 @@
+ Coosis's Blog +
+ + + + +
+
+ + Coosis's Blog + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+
+
+
+ +

Dynamic WebPage

+ + +
+ + + +
+
+
+
+
+ +
+ + + +
+
+
+
+

Before Everything Else:

+

Remember how last time I promised to update once I learn more? It turned out that the web design contest has two groups: static, and dynamic. I wanted to try do a dynamic website, and oh boy was it a lot to unpack.

+

Static and Dynamic?

+

According to wikipedia, static web page is a web page that is delivered to a web browser exactly as stored, displays the same information for all user, and often stored in a .html file. +A dynamic website, however, is often a web page generated by a web application. Its contents shift based on user inputs, informations. Dynamic websites are combinations of frontend and backend.

+ + + +
+ + + +
+
+
+ How they connect +
+ +
+

How they connect

+
+
+
+ + +
+ +

Frontend and Backend?

+

Frontend is the graphical user interface that we see on a page, the titles, the texts, the buttons and the images, etc. Frontend development is the process of creating those things, usually invoving html, css and javascript. Backend is what the user cannot see, the data-processing, the page-generating and more. It’s the logic and mechanisms that happen on web pages. The frontend and backend are connected through http requests. When user say, clicks a button to log in, the a http request is made from frontend to backend, indicating a login is happening, so the server the backend is on can process the request.

+

My Approach?

+

Since I only knew a bit of C#, I decided to write my backend using just that. C# is, well, not the most popular choice among its candidates like java and others. But it’s definitely usable. So I began looking into it, and that was when I found: Razor Pages with asp.net. It’s literally magic. Just let me tell you.

+

RazorPage and asp.net

+

ASP.NET is a open-source web framework developed by microsoft. RazorPage is a new form of web page template ends in .cshtml. From that name you’d probably already have an idea what is does. It has the amazing ablity to embed C# code into html contents. When creating a razor page, a .cshtml.cs file is also created, and inside is where you can write your backend code. Wait, what just happened? Yes, when users are accessing a razor page, the GET and POST methods can directly be handled inside the corresponding .cshtml.cs file! With such power, I could become a “full-stack” web developer in just days!

+

Result

+

After trying it out, I was able to create a site diplaying coffee. I implemented a log in mechanism, and yes, I had to rent a linux server. In my case, I used Apache as my web server, and created a mysql server for storing the user data.

+ + + +
+ + Web  + + Dynamic  + +
+ + + + + +
+ + + + + + + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/posts/firstpost/index.html b/public/posts/firstpost/index.html index d2d34cf..02f9a9f 100644 --- a/public/posts/firstpost/index.html +++ b/public/posts/firstpost/index.html @@ -6,6 +6,7 @@ + @@ -96,7 +97,7 @@ - + @@ -110,7 +111,7 @@

-

Side note: I never got the gallery thing figured out, so I’m stuck with just markdown images.

+

Side note: I never got the gallery thing figured out, so I’m stuck with just markdown images. +Side note: I got it I got it I got it!!! After learning the basics of html and css, I inspected the page and it turns out the path of the image was wrong. All better now!

@@ -402,12 +404,12 @@

Actually getting it done:

@@ -428,36 +430,6 @@

Actually getting it done:

@@ -479,7 +451,7 @@

Actually getting it done:

- Hugo v0.118.2 powered  •  Theme Beautiful Hugo adapted from Beautiful Jekyll +

diff --git a/public/posts/firsttime_webdesign/index.html b/public/posts/firsttime_webdesign/index.html index ce33eb7..748ff86 100644 --- a/public/posts/firsttime_webdesign/index.html +++ b/public/posts/firsttime_webdesign/index.html @@ -6,12 +6,14 @@ + First-Time: WebPage Design - + + + - + @@ -107,7 +111,7 @@
+ Coosis's Blog +
+ + + + +
+
+ + Coosis's Blog + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+
+
+
+ +

CSS

+ + +
+ + + +
+
+
+
+
+ +
+ + + +
+
+
+ +
+ +
+ +

First-Time: WebPage Design

+ + + + + +

+ + + +   + + + + + +  |  Coosis + + + + + + +

+
+ + Before Everything Else: College just started. During one of the tours of the school, I found that there’s a Web-Design contest to be held by our school. Although I don’t have the first clue of writing html and css and javascript, I still wanted to go and try. There would also be sophomore, junior and senior students participate, but apparently as a freshman I can get bonus score so I would still have a chance. + [] + +
+ + +
+ + HTML  + + Web  + + CSS  + + Design  + +
+ + +
+ +
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/tags/css/index.xml b/public/tags/css/index.xml new file mode 100644 index 0000000..d6fa681 --- /dev/null +++ b/public/tags/css/index.xml @@ -0,0 +1,22 @@ + + + + CSS on Coosis's Blog + https://coosis.github.io/blog/tags/css/ + Recent content in CSS on Coosis's Blog + Hugo -- gohugo.io + en-us + 1159727122@qq.com (Coosis) + 1159727122@qq.com (Coosis) + Sat, 09 Sep 2023 21:41:07 +0800 + + First-Time: WebPage Design + https://coosis.github.io/blog/posts/firsttime_webdesign/ + Sat, 09 Sep 2023 21:41:07 +0800 + 1159727122@qq.com (Coosis) + https://coosis.github.io/blog/posts/firsttime_webdesign/ + Before Everything Else: College just started. During one of the tours of the school, I found that there&rsquo;s a Web-Design contest to be held by our school. Although I don&rsquo;t have the first clue of writing html and css and javascript, I still wanted to go and try. There would also be sophomore, junior and senior students participate, but apparently as a freshman I can get bonus score so I would still have a chance. + + + + diff --git a/public/tags/css/page/1/index.html b/public/tags/css/page/1/index.html new file mode 100644 index 0000000..2fa41a8 --- /dev/null +++ b/public/tags/css/page/1/index.html @@ -0,0 +1,10 @@ + + + + https://coosis.github.io/blog/tags/css/ + + + + + + diff --git a/public/tags/design/index.html b/public/tags/design/index.html new file mode 100644 index 0000000..13fe68a --- /dev/null +++ b/public/tags/design/index.html @@ -0,0 +1,319 @@ + + + + + + + + + + + + + + Design - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+
+
+
+ +

Design

+ + +
+ + + +
+
+
+
+
+ +
+ + + +
+
+
+ +
+ +
+ +

First-Time: WebPage Design

+ + + + + +

+ + + +   + + + + + +  |  Coosis + + + + + + +

+
+ + Before Everything Else: College just started. During one of the tours of the school, I found that there’s a Web-Design contest to be held by our school. Although I don’t have the first clue of writing html and css and javascript, I still wanted to go and try. There would also be sophomore, junior and senior students participate, but apparently as a freshman I can get bonus score so I would still have a chance. + [] + +
+ + +
+ + HTML  + + Web  + + CSS  + + Design  + +
+ + +
+ +
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/tags/design/index.xml b/public/tags/design/index.xml new file mode 100644 index 0000000..f260151 --- /dev/null +++ b/public/tags/design/index.xml @@ -0,0 +1,22 @@ + + + + Design on Coosis's Blog + https://coosis.github.io/blog/tags/design/ + Recent content in Design on Coosis's Blog + Hugo -- gohugo.io + en-us + 1159727122@qq.com (Coosis) + 1159727122@qq.com (Coosis) + Sat, 09 Sep 2023 21:41:07 +0800 + + First-Time: WebPage Design + https://coosis.github.io/blog/posts/firsttime_webdesign/ + Sat, 09 Sep 2023 21:41:07 +0800 + 1159727122@qq.com (Coosis) + https://coosis.github.io/blog/posts/firsttime_webdesign/ + Before Everything Else: College just started. During one of the tours of the school, I found that there&rsquo;s a Web-Design contest to be held by our school. Although I don&rsquo;t have the first clue of writing html and css and javascript, I still wanted to go and try. There would also be sophomore, junior and senior students participate, but apparently as a freshman I can get bonus score so I would still have a chance. + + + + diff --git a/public/tags/design/page/1/index.html b/public/tags/design/page/1/index.html new file mode 100644 index 0000000..4269dcd --- /dev/null +++ b/public/tags/design/page/1/index.html @@ -0,0 +1,10 @@ + + + + https://coosis.github.io/blog/tags/design/ + + + + + + diff --git a/public/tags/dynamic/index.html b/public/tags/dynamic/index.html new file mode 100644 index 0000000..858585c --- /dev/null +++ b/public/tags/dynamic/index.html @@ -0,0 +1,316 @@ + + + + + + + + + + + + + + Dynamic - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+
+
+
+ +

Dynamic

+ + +
+ + + +
+
+
+
+
+ +
+ + + +
+
+
+ +
+ +
+ +

Dynamic WebPage

+ + + + + +

+ + + +   + + + + + +  |  Coosis + + + + + + +

+
+ + Before Everything Else: Remember how last time I promised to update once I learn more? It turned out that the web design contest has two groups: static, and dynamic. I wanted to try do a dynamic website, and oh boy was it a lot to unpack. +Static and Dynamic? According to wikipedia, static web page is a web page that is delivered to a web browser exactly as stored, displays the same information for all user, and often stored in a . + [] + +
+ + +
+ + Web  + + Dynamic  + +
+ + +
+ +
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/tags/dynamic/index.xml b/public/tags/dynamic/index.xml new file mode 100644 index 0000000..f6de8ed --- /dev/null +++ b/public/tags/dynamic/index.xml @@ -0,0 +1,23 @@ + + + + Dynamic on Coosis's Blog + https://coosis.github.io/blog/tags/dynamic/ + Recent content in Dynamic on Coosis's Blog + Hugo -- gohugo.io + en-us + 1159727122@qq.com (Coosis) + 1159727122@qq.com (Coosis) + Tue, 24 Oct 2023 10:12:12 +0800 + + Dynamic WebPage + https://coosis.github.io/blog/posts/dynamicwebpage/ + Tue, 24 Oct 2023 10:12:12 +0800 + 1159727122@qq.com (Coosis) + https://coosis.github.io/blog/posts/dynamicwebpage/ + Before Everything Else: Remember how last time I promised to update once I learn more? It turned out that the web design contest has two groups: static, and dynamic. I wanted to try do a dynamic website, and oh boy was it a lot to unpack. +Static and Dynamic? According to wikipedia, static web page is a web page that is delivered to a web browser exactly as stored, displays the same information for all user, and often stored in a . + + + + diff --git a/public/tags/dynamic/page/1/index.html b/public/tags/dynamic/page/1/index.html new file mode 100644 index 0000000..e24766d --- /dev/null +++ b/public/tags/dynamic/page/1/index.html @@ -0,0 +1,10 @@ + + + + https://coosis.github.io/blog/tags/dynamic/ + + + + + + diff --git a/public/tags/html/index.html b/public/tags/html/index.html new file mode 100644 index 0000000..021ff31 --- /dev/null +++ b/public/tags/html/index.html @@ -0,0 +1,319 @@ + + + + + + + + + + + + + + HTML - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+
+
+
+ +

HTML

+ + +
+ + + +
+
+
+
+
+ +
+ + + +
+
+
+ +
+ +
+ +

First-Time: WebPage Design

+ + + + + +

+ + + +   + + + + + +  |  Coosis + + + + + + +

+
+ + Before Everything Else: College just started. During one of the tours of the school, I found that there’s a Web-Design contest to be held by our school. Although I don’t have the first clue of writing html and css and javascript, I still wanted to go and try. There would also be sophomore, junior and senior students participate, but apparently as a freshman I can get bonus score so I would still have a chance. + [] + +
+ + +
+ + HTML  + + Web  + + CSS  + + Design  + +
+ + +
+ +
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/tags/html/index.xml b/public/tags/html/index.xml new file mode 100644 index 0000000..540ef4b --- /dev/null +++ b/public/tags/html/index.xml @@ -0,0 +1,22 @@ + + + + HTML on Coosis's Blog + https://coosis.github.io/blog/tags/html/ + Recent content in HTML on Coosis's Blog + Hugo -- gohugo.io + en-us + 1159727122@qq.com (Coosis) + 1159727122@qq.com (Coosis) + Sat, 09 Sep 2023 21:41:07 +0800 + + First-Time: WebPage Design + https://coosis.github.io/blog/posts/firsttime_webdesign/ + Sat, 09 Sep 2023 21:41:07 +0800 + 1159727122@qq.com (Coosis) + https://coosis.github.io/blog/posts/firsttime_webdesign/ + Before Everything Else: College just started. During one of the tours of the school, I found that there&rsquo;s a Web-Design contest to be held by our school. Although I don&rsquo;t have the first clue of writing html and css and javascript, I still wanted to go and try. There would also be sophomore, junior and senior students participate, but apparently as a freshman I can get bonus score so I would still have a chance. + + + + diff --git a/public/tags/html/page/1/index.html b/public/tags/html/page/1/index.html new file mode 100644 index 0000000..49324ed --- /dev/null +++ b/public/tags/html/page/1/index.html @@ -0,0 +1,10 @@ + + + + https://coosis.github.io/blog/tags/html/ + + + + + + diff --git a/public/tags/index.html b/public/tags/index.html index d4da182..b1ba640 100644 --- a/public/tags/index.html +++ b/public/tags/index.html @@ -6,13 +6,14 @@ + Overview of all pages with the tag #Tags - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+
+
+
+ +

Web

+ + +
+ + + +
+
+
+
+
+ +
+ + + +
+
+
+ +
+ +
+ +

Dynamic WebPage

+ + + + + +

+ + + +   + + + + + +  |  Coosis + + + + + + +

+
+ + Before Everything Else: Remember how last time I promised to update once I learn more? It turned out that the web design contest has two groups: static, and dynamic. I wanted to try do a dynamic website, and oh boy was it a lot to unpack. +Static and Dynamic? According to wikipedia, static web page is a web page that is delivered to a web browser exactly as stored, displays the same information for all user, and often stored in a . + [] + +
+ + +
+ + Web  + + Dynamic  + +
+ + +
+ +
+ +

First-Time: WebPage Design

+ + + + + +

+ + + +   + + + + + +  |  Coosis + + + + + + +

+
+ + Before Everything Else: College just started. During one of the tours of the school, I found that there’s a Web-Design contest to be held by our school. Although I don’t have the first clue of writing html and css and javascript, I still wanted to go and try. There would also be sophomore, junior and senior students participate, but apparently as a freshman I can get bonus score so I would still have a chance. + [] + +
+ + +
+ + HTML  + + Web  + + CSS  + + Design  + +
+ + +
+ +
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/tags/web/index.xml b/public/tags/web/index.xml new file mode 100644 index 0000000..23fc1e8 --- /dev/null +++ b/public/tags/web/index.xml @@ -0,0 +1,32 @@ + + + + Web on Coosis's Blog + https://coosis.github.io/blog/tags/web/ + Recent content in Web on Coosis's Blog + Hugo -- gohugo.io + en-us + 1159727122@qq.com (Coosis) + 1159727122@qq.com (Coosis) + Tue, 24 Oct 2023 10:12:12 +0800 + + Dynamic WebPage + https://coosis.github.io/blog/posts/dynamicwebpage/ + Tue, 24 Oct 2023 10:12:12 +0800 + 1159727122@qq.com (Coosis) + https://coosis.github.io/blog/posts/dynamicwebpage/ + Before Everything Else: Remember how last time I promised to update once I learn more? It turned out that the web design contest has two groups: static, and dynamic. I wanted to try do a dynamic website, and oh boy was it a lot to unpack. +Static and Dynamic? According to wikipedia, static web page is a web page that is delivered to a web browser exactly as stored, displays the same information for all user, and often stored in a . + + + + First-Time: WebPage Design + https://coosis.github.io/blog/posts/firsttime_webdesign/ + Sat, 09 Sep 2023 21:41:07 +0800 + 1159727122@qq.com (Coosis) + https://coosis.github.io/blog/posts/firsttime_webdesign/ + Before Everything Else: College just started. During one of the tours of the school, I found that there&rsquo;s a Web-Design contest to be held by our school. Although I don&rsquo;t have the first clue of writing html and css and javascript, I still wanted to go and try. There would also be sophomore, junior and senior students participate, but apparently as a freshman I can get bonus score so I would still have a chance. + + + + diff --git a/public/tags/web/page/1/index.html b/public/tags/web/page/1/index.html new file mode 100644 index 0000000..25a1a31 --- /dev/null +++ b/public/tags/web/page/1/index.html @@ -0,0 +1,10 @@ + + + + https://coosis.github.io/blog/tags/web/ + + + + + +