Skip to content

Latest commit

 

History

History
178 lines (126 loc) · 5.39 KB

README.md

File metadata and controls

178 lines (126 loc) · 5.39 KB

Server side application skeleton

caution

Basic server side web application with the following functionality:

  • HTTP/HTTPS servers
  • routes and authentication on middleware (use gorilla mux)
  • session management (use gorilla sessions)
  • user management (registration, change and delete user, password recovery by mail)
  • offline fallback page if network fail
  • modular design, can be extended very easy
  • config file in JSON format
  • database generated from file or model (with Mysql Workbench)
  • responsive interface for mobile access, browser back button disabled
  • salted and hashed passwords in database

Integrations

The skeleton is based on W3CSS, a very lightweight CSS framework and is designed to integrate with JQuery, Angular, Fontawesome and some useful libraries like Datetime picker and Google Charts (see ui/head.html file).

Compilation modes

Plaint text passwords

go build -tags="plain"

Passwords are stored in plain text in the database and sent as plain text on mail to recovery (unrecommended).

Hashed passwords

go build -tags="sha1 random"

Passwords are stored hashed in the database and sent as random on mail to recovery (recommended).

Salted and hashed passwords

go build -tags="saltsha1 random"

Passwords are stored salted and hashed in the database and sent as random on mail to recovery (highly recommended).

The tag random mean send password as random string.

How is look like?

Signup screen

signup

Mail/reset my password

reset

Signin screen

signin

Basic home screen

home

Local account management

user

Network fail page

cache

Configuration file

{
    "database": {
        "ip": "example.com",
        "port": 3306,
        "user": "root",
        "password": "password",
        "name": "skel"
    },
    "smtp": "smtp.gmail.com",
    "port": 587,
    "user": "[email protected]",
    "password": "password",
    "name": "mailer name"
}

Database must be created by hand before running the program. Mailer is used to recovery forgotten passwords.

Database

Database structure is described in database.sql file. Adjust the database name and import the file in Mysql. Alternatively you can use the model from model/skel_full.mwb (with Mysql Workbench)

Parameters

Start the program with the following parameters:

-http

Listening address and port for HTTP server. Default :8080.

-https

Listening address and port for HTTPS server. Default :8090.

-https-enabled

Enable HTTPS server. Default false.

Adding a simple application

Add menu option in ui/navbar.html file

<a href="/a/dummy" class="w3-bar-item" title="Dummy page">Page</i></a>

Add route to the application in main.go file

application.HandleFunc("/dummy", dummy)

Create ui/dummy.html file for application user interface

[[define "dummy"]]
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
[[template "head"]]
</head>
<body>
[[template "navbar" .]]
<div class="w3-display-container" style="height:300px;">
  <div class="w3-display-middle w3-center">
  <form method="post" action="">
  <button type="submit" name="submit">Press this button!</button>
  <p>[[.Message]]
  </form>
</div>
</div>
</body>
</html>
[[end]]

Create ui_dummy.go file who handle the application

package main

import (
	"net/http"
)

func dummy(w http.ResponseWriter, r *http.Request) {
	session, _ := store.Get(r, SESSID)
	user := session.Values["user"].(User)
	params := struct {
		Name    string // this is mandatory
		Message string // TODO add fields as you need
	}{Name: user.Name}
	switch r.Method {
	case "GET":
		templ.ExecuteTemplate(w, "dummy", params)
	case "POST":
		params.Message = "You pressed dummy button!"
		templ.ExecuteTemplate(w, "dummy", params)
	}
}

Take care to the template parameters. Add them as you need. Name parameter must appear in all applications because is the user name from the top right navbar.

Look carefully over TODO and NOTE comments because you may need to adjust as you need.

Make your application look better with Bootstrap

For keeping things simple, the skeleton comes with a very basic set of widgets based on W3CSS. You can use Bootstrap following the next steps:

  • remove inputs height from style.html because is useful just for W3CSS framework

      select,input,button {
        -height:30px; /* all inputs must have the same height */
    
  • use fixed length in forms containers, eg:

      <div class="w3-container" style="width:400px">
    
  • add bootstrap classes on inputs (or other elements), eg:

      <input class="form-control" type="text">
      <button class="btn btn-primary" type="submit">
    

Known issues

The skeleton is designed to work with HTML5 so make sure your browser support this.