DynamicWebPage_01

Coosis · Oct 24, 2023 · ccf2653 · ccf2653
1 parent 2838f8f
commit ccf2653
Show file tree

Hide file tree

Showing 35 changed files with 2,739 additions and 432 deletions.
diff --git a/content/posts/DynamicWebPage/Frontend_Backend.png b/content/posts/DynamicWebPage/Frontend_Backend.png
diff --git a/content/posts/DynamicWebPage/index.md 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.
+``
diff --git a/public/404.html b/public/404.html
@@ -6,6 +6,7 @@
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <meta name="google-site-verification" content="t_TkYp9H-QzyozkJBb7xeqpWqk1LXGgXd-7DiMrsFHs" />
 
 
 
@@ -45,7 +46,7 @@
   <meta name="twitter:site" content="@Coosis2" />
   <meta name="twitter:creator" content="@Coosis2" />
   <link href='https://coosis.github.io/blog/img/ClearHead2.ico' rel='icon' type='image/x-icon'/>
-  <meta name="generator" content="Hugo 0.118.2">
+  <meta name="generator" content="Hugo 0.119.0">
   <link rel="alternate" href="https://coosis.github.io/blog/index.xml" type="application/rss+xml" title="Coosis&#39;s Blog"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-3UiQGuEI4TTMaFmGIZumfRPtfKQ3trwQE2JgosJxCnGmQpL/lJdjpcHkaaFwHlcI" crossorigin="anonymous">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"><link rel="stylesheet" href="https://coosis.github.io/blog/css/main.css" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" />
@@ -59,7 +60,7 @@
   <div class="container-fluid">
     <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-navbar">
-        <span class="sr-only">Toggle navigation</span>
+        <span class="sr-only"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
@@ -116,7 +117,7 @@
   <div role="main" class="container main-content">
     <div class="text-center">
       <h1 class="error-emoji"></h1>
-      <p class="error-text">Whoops, this page doesn&#39;t exist. Move along. (404 error)</p>
+      <p class="error-text"></p>
     </div>
   </div>
 <script>
@@ -145,36 +146,6 @@ <h1 class="error-emoji"></h1>
       <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
         <ul class="list-inline text-center footer-links">
 
-              <li>
-
-		  <a href="mailto:[email protected]" title="Email me">
-
-                  <span class="fa-stack fa-lg">
-                    <i class="fas fa-circle fa-stack-2x"></i>
-                    <i class="fas fa-envelope fa-stack-1x fa-inverse"></i>
-                  </span>
-                </a>
-              </li>
-              <li>
-
-		  <a href="https://github.com/Coosis" title="GitHub">
-
-                  <span class="fa-stack fa-lg">
-                    <i class="fas fa-circle fa-stack-2x"></i>
-                    <i class="fab fa-github fa-stack-1x fa-inverse"></i>
-                  </span>
-                </a>
-              </li>
-              <li>
-
-		  <a href="https://twitter.com/Coosis2" title="Twitter">
-
-                  <span class="fa-stack fa-lg">
-                    <i class="fas fa-circle fa-stack-2x"></i>
-                    <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
-                  </span>
-                </a>
-              </li>
 
         </ul>
         <p class="credits copyright text-muted">
@@ -196,7 +167,7 @@ <h1 class="error-emoji"></h1>
         </p>
 
         <p class="credits theme-by text-muted">
-          <a href="https://gohugo.io">Hugo v0.118.2</a> powered &nbsp;&bull;&nbsp; Theme <a href="https://github.com/halogenica/beautifulhugo">Beautiful Hugo</a> adapted from <a href="https://deanattali.com/beautiful-jekyll/">Beautiful Jekyll</a>
+
 
         </p>
       </div>

diff --git a/public/categories/index.html b/public/categories/index.html
@@ -6,6 +6,7 @@
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <meta name="google-site-verification" content="t_TkYp9H-QzyozkJBb7xeqpWqk1LXGgXd-7DiMrsFHs" />
 
 
 
@@ -46,7 +47,7 @@
   <meta name="twitter:site" content="@Coosis2" />
   <meta name="twitter:creator" content="@Coosis2" />
   <link href='https://coosis.github.io/blog/img/ClearHead2.ico' rel='icon' type='image/x-icon'/>
-  <meta name="generator" content="Hugo 0.118.2">
+  <meta name="generator" content="Hugo 0.119.0">
   <link rel="alternate" href="https://coosis.github.io/blog/index.xml" type="application/rss+xml" title="Coosis&#39;s Blog"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-3UiQGuEI4TTMaFmGIZumfRPtfKQ3trwQE2JgosJxCnGmQpL/lJdjpcHkaaFwHlcI" crossorigin="anonymous">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"><link rel="stylesheet" href="https://coosis.github.io/blog/css/main.css" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" />
@@ -60,7 +61,7 @@
   <div class="container-fluid">
     <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-navbar">
-        <span class="sr-only">Toggle navigation</span>
+        <span class="sr-only"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
@@ -220,36 +221,6 @@ <h1>Categories</h1>
       <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
         <ul class="list-inline text-center footer-links">
 
-              <li>
-
-		  <a href="mailto:[email protected]" title="Email me">
-
-                  <span class="fa-stack fa-lg">
-                    <i class="fas fa-circle fa-stack-2x"></i>
-                    <i class="fas fa-envelope fa-stack-1x fa-inverse"></i>
-                  </span>
-                </a>
-              </li>
-              <li>
-
-		  <a href="https://github.com/Coosis" title="GitHub">
-
-                  <span class="fa-stack fa-lg">
-                    <i class="fas fa-circle fa-stack-2x"></i>
-                    <i class="fab fa-github fa-stack-1x fa-inverse"></i>
-                  </span>
-                </a>
-              </li>
-              <li>
-
-		  <a href="https://twitter.com/Coosis2" title="Twitter">
-
-                  <span class="fa-stack fa-lg">
-                    <i class="fas fa-circle fa-stack-2x"></i>
-                    <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
-                  </span>
-                </a>
-              </li>
 
         </ul>
         <p class="credits copyright text-muted">
@@ -271,7 +242,7 @@ <h1>Categories</h1>
         </p>
 
         <p class="credits theme-by text-muted">
-          <a href="https://gohugo.io">Hugo v0.118.2</a> powered &nbsp;&bull;&nbsp; Theme <a href="https://github.com/halogenica/beautifulhugo">Beautiful Hugo</a> adapted from <a href="https://deanattali.com/beautiful-jekyll/">Beautiful Jekyll</a>
+
 
         </p>
       </div>

diff --git a/public/index.html b/public/index.html
@@ -6,6 +6,7 @@
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <meta name="google-site-verification" content="t_TkYp9H-QzyozkJBb7xeqpWqk1LXGgXd-7DiMrsFHs" />
 
 
 
@@ -44,7 +45,7 @@
   <meta name="twitter:site" content="@Coosis2" />
   <meta name="twitter:creator" content="@Coosis2" />
   <link href='https://coosis.github.io/blog/img/ClearHead2.ico' rel='icon' type='image/x-icon'/>
-  <meta name="generator" content="Hugo 0.118.2">
+  <meta name="generator" content="Hugo 0.119.0">
   <link rel="alternate" href="https://coosis.github.io/blog/index.xml" type="application/rss+xml" title="Coosis&#39;s Blog"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-3UiQGuEI4TTMaFmGIZumfRPtfKQ3trwQE2JgosJxCnGmQpL/lJdjpcHkaaFwHlcI" crossorigin="anonymous">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"><link rel="stylesheet" href="https://coosis.github.io/blog/css/main.css" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" />
@@ -58,7 +59,7 @@
   <div class="container-fluid">
     <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-navbar">
-        <span class="sr-only">Toggle navigation</span>
+        <span class="sr-only"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
@@ -207,6 +208,52 @@ <h1>Coosis&#39;s Blog</h1>
         <div class="posts-list">
 
 
+            <article class="post-preview">
+    <a href="https://coosis.github.io/blog/posts/dynamicwebpage/">
+        <h2 class="post-title">Dynamic WebPage</h2>
+
+
+
+    </a>
+
+    <p class="post-meta">
+        <span class="post-meta">
+
+
+  <i class="fas fa-calendar"></i>&nbsp;
+
+
+
+
+
+      &nbsp;|&nbsp;<i class="fas fa-user"></i>&nbsp;Coosis
+
+
+
+</span>
+
+
+    </p>
+    <div class="post-entry">
+
+        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 .
+        <a href="https://coosis.github.io/blog/posts/dynamicwebpage/" class="post-read-more">[]</a>
+
+    </div>
+
+
+    <div class="blog-tags">
+
+        <a href="https://coosis.github.io/blog//tags/web/">Web</a>&nbsp;
+
+        <a href="https://coosis.github.io/blog//tags/dynamic/">Dynamic</a>&nbsp;
+
+    </div>
+
+
+</article>
+
             <article class="post-preview">
     <a href="https://coosis.github.io/blog/posts/firsttime_webdesign/">
         <h2 class="post-title">First-Time: WebPage Design</h2>
@@ -219,7 +266,7 @@ <h2 class="post-title">First-Time: WebPage Design</h2>
         <span class="post-meta">
 
 
-  <i class="fas fa-calendar"></i>&nbsp;Posted on September 9, 2023
+  <i class="fas fa-calendar"></i>&nbsp;
 
 
 
@@ -235,11 +282,24 @@ <h2 class="post-title">First-Time: WebPage Design</h2>
     </p>
     <div class="post-entry">
 
-
+        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.
+        <a href="https://coosis.github.io/blog/posts/firsttime_webdesign/" class="post-read-more">[]</a>
 
     </div>
 
 
+    <div class="blog-tags">
+
+        <a href="https://coosis.github.io/blog//tags/html/">HTML</a>&nbsp;
+
+        <a href="https://coosis.github.io/blog//tags/web/">Web</a>&nbsp;
+
+        <a href="https://coosis.github.io/blog//tags/css/">CSS</a>&nbsp;
+
+        <a href="https://coosis.github.io/blog//tags/design/">Design</a>&nbsp;
+
+    </div>
+
 
 </article>
 
@@ -255,7 +315,7 @@ <h2 class="post-title">First-Time: Minecraft Plugin</h2>
         <span class="post-meta">
 
 
-  <i class="fas fa-calendar"></i>&nbsp;Posted on August 18, 2023
+  <i class="fas fa-calendar"></i>&nbsp;
 
 
 
@@ -272,7 +332,7 @@ <h2 class="post-title">First-Time: Minecraft Plugin</h2>
     <div class="post-entry">
 
         Before Everything Else: A week ago, a friend of mine was planning to set up a minecraft server. I got excited, since I have a spare RaspberryPi 4 with 8 gigs of ram ready to be put to use. But with a 32-bit os, it wasn&rsquo;t really fit for the job. So I started to use my old laptop. I installed pop!_os, downloaded java 17, and after some research, set up a papermc server.
-        <a href="https://coosis.github.io/blog/posts/firsttime_minecraftplugin/" class="post-read-more">[Read More]</a>
+        <a href="https://coosis.github.io/blog/posts/firsttime_minecraftplugin/" class="post-read-more">[]</a>
 
     </div>
 
@@ -304,7 +364,7 @@ <h3 class="post-subtitle">
         <span class="post-meta">
 
 
-  <i class="fas fa-calendar"></i>&nbsp;Posted on August 11, 2023
+  <i class="fas fa-calendar"></i>&nbsp;
 
 
 
@@ -363,36 +423,6 @@ <h3 class="post-subtitle">
       <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
         <ul class="list-inline text-center footer-links">
 
-              <li>
-
-		  <a href="mailto:[email protected]" title="Email me">
-
-                  <span class="fa-stack fa-lg">
-                    <i class="fas fa-circle fa-stack-2x"></i>
-                    <i class="fas fa-envelope fa-stack-1x fa-inverse"></i>
-                  </span>
-                </a>
-              </li>
-              <li>
-
-		  <a href="https://github.com/Coosis" title="GitHub">
-
-                  <span class="fa-stack fa-lg">
-                    <i class="fas fa-circle fa-stack-2x"></i>
-                    <i class="fab fa-github fa-stack-1x fa-inverse"></i>
-                  </span>
-                </a>
-              </li>
-              <li>
-
-		  <a href="https://twitter.com/Coosis2" title="Twitter">
-
-                  <span class="fa-stack fa-lg">
-                    <i class="fas fa-circle fa-stack-2x"></i>
-                    <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
-                  </span>
-                </a>
-              </li>
 
         </ul>
         <p class="credits copyright text-muted">
@@ -414,7 +444,7 @@ <h3 class="post-subtitle">
         </p>
 
         <p class="credits theme-by text-muted">
-          <a href="https://gohugo.io">Hugo v0.118.2</a> powered &nbsp;&bull;&nbsp; Theme <a href="https://github.com/halogenica/beautifulhugo">Beautiful Hugo</a> adapted from <a href="https://deanattali.com/beautiful-jekyll/">Beautiful Jekyll</a>
+
 
         </p>
       </div>