CEK文件文件V2
存储库/源代码：https://github.com/JaisySymuri/postgre
在哪里将其首先制作，后端还是前端？实际上，这是有史以来像鸡鸡蛋一样的辩论。有关更多详细信息，您可以自己使用Google。但是，作为初学者，我认为首先制作前端将使结果变得更容易想象。
要制作前端，我们可以立即制作HTML或使用模板。 HTML更容易制作，因为它得到了想法的支持，因此有自动完整的颜色和错误指标。模板更难制作，因为据我所知，没有任何支持。但是，该模板将使应用程序更轻，尤其是如果应用程序具有大量CSS和JavaScript，并且应用程序页面相同。
在这里插入“为什么不同时？.jpg”
所以，我很容易使用HTML制作，直到前端看起来不错。然后只需复制文件即可。准备就绪时，我们可以删除所有HTML/移动到Archieve，因为它不再使用。该应用程序易于制作和轻巧。
好吧，首先创建一个新的文件夹来容纳所有 html文件，即“ html”。然后制作另一个文件夹以容纳所有模板文件，即“形式”。
在HTML文件夹中，创建'new.html'：
html/new.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Golang Postgres</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script>
</script>
</head>
<body>
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">Golang Postgres</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="/">HOME</a></li>
<li><a href="/new">NEW</a></li>
<li><a href="/files">FILES</a></li>
<li><a href="/search">SEARCH</a></li>
</ul>
</div>
</nav>
<h2>New Profile</h2>
<form method="POST" action="insert" enctype="multipart/form-data">
<label> NIK </label><input type="text" name="NIK" /><br />
<label> Nama </label><input type="text" name="Nama" /><br />
<label> Username </label><input type="text" name="Username" /><br />
<label> Password </label><input type="password" name="Password" /><br />
<label> Alamat </label><input type="text" name="Alamat" /><br />
<label> Tempat_Lahir </label><input type="text" name="Tempat_Lahir" /><br />
<label> Tanggal_Lahir </label><input type="date" name="Tanggal_Lahir" /><br />
<label> No_HP </label><input type="number" name="No_HP" /><br />
<label> Pekerjaan </label><input type="text" name="Pekerjaan" /><br />
<label> Gender </label><input type="text" name="Gender" /><br />
<label> Email </label><input type="text" name="Email" /><br />
<label> Nama_Ibu </label><input type="text" name="Nama_Ibu" /><br />
<label>The file :</label>
<input type="file" name="file" required /><br />
<label>Rename to :</label>
<input type="text" name="alias" /><br />
<input type="submit" value="Save user" />
</form>
</body>
</html>
说明：
- <！ - 编译和缩小的CSS＆JavaScript->包含我们导入的CSS和JavaScript的库的地址。因此，在制作时稍后再打电话。
- 包含一个菜单栏。因此，计划在我们应用程序的每一页上，我们都将拥有此菜单栏。内容是：
Golang Postgres，应用程序徽标。
主页，应用程序的主页。
新的页面创建一个新的用户配置文件。
文件，显示已上传并下载文件的文件。
搜索，搜索某些用户的页面。
- 标题页，'新个人资料'
- 根据我们之前制作的表格创建一个包含柱状的表格。填写表格将发送到“插入”。为了使其更容易，所有标签我们选择类型文本，除了密码，出生日期和文件。
测试
要检查VSCODE，我们使用Live Server扩展名。单击窗口vs代码底部的“去实时” ...瞧！
非常漂亮。好吧，现在我们制作模板。在“表单”文件夹中，创建一个新文件“ header.tmpl”。在那里，我们通过编写{{ define "Header" }}和{{ end }}来定义标题模板。它们是指示模板开始和结束的语法。然后将“ new.html”的内容从菜单栏的结尾复制。结果，“ header.tmpl”的内容如下：
form/header.tmpl
{{ define "Header" }}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Golang Postgres</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script>
</script>
</head>
<body>
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">Golang Postgres/a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="/">HOME</a></li>
<li><a href="/new">NEW</a></li>
<li><a href="/files">FILES</a></li>
<li><a href="/search">SEARCH</a></li>
</ul>
</div>
</nav>
{{ end }}
然后，我们成为页脚，“ footer.tmpl”。我们定义页脚，并用身体盖和HTML填充：
form/footer.tmpl
{{ define "Footer" }}
</body>
</html>
{{ end }}
很短，因为它仅适用于封面。
再次创建一个新文件，“ new.tmpl”。我们定义“新”模板，通过调用模板为“标头”和“页脚”来填充键入{{ template "nama_template" }}的方法。在两个模板之间，用new.html的副本内容填充'<h2>New Profile</h2>'到'</form>'结束。
form/new.tmpl
{{ define "New" }}
{{ template "Header" }}
<h2>New Profile</h2>
<form method="POST" action="insert" enctype="multipart/form-data">
<label> NIK </label><input type="text" name="NIK" /><br />
<label> Nama </label><input type="text" name="Nama" /><br />
<label> Username </label><input type="text" name="Username" /><br />
<label> Password </label><input type="password" name="Password" /><br />
<label> Alamat </label><input type="text" name="Alamat" /><br />
<label> Tempat_Lahir </label><input type="text" name="Tempat_Lahir" /><br />
<label> Tanggal_Lahir </label><input type="date" name="Tanggal_Lahir" /><br />
<label> No_HP </label><input type="number" name="No_HP" /><br />
<label> Pekerjaan </label><input type="text" name="Pekerjaan" /><br />
<label> Gender </label><input type="text" name="Gender" /><br />
<label> Email </label><input type="text" name="Email" /><br />
<label> Nama_Ibu </label><input type="text" name="Nama_Ibu" /><br />
<label>The file :</label>
<input type="file" name="file" required /><br />
<label>Rename to :</label>
<input type="text" name="alias" /><br />
<input type="submit" value="Save user" />
</form>
{{ template "Footer" }}
{{ end }}