Go for Web Application: Template and jQuery Integration

In this article I will explain about using Go to develop web application together with template and jQuery integration. Develop a web server is a trivial task in Go. Interestingly, Go which initially meant to ease the development of server software has lots of standard libraries for that purpose. Web server is not the only one, although we will explore this capability now. Before we continue, make sure that you already have jQuery (I use jquery-ui 1.9.1) and of course Go (1.0.3). For now, we do not need template engine since Go comes with html/template package. That's enough for now.

Ok, let me give an overview first. We will develop a simple Web application. Our application (let's say its name is go-jquery-example) will read the template, put a string inside the template and display the template. Wait, that's not quite complex, we will add jQuery into that page so in the future we may develop a Web application with good UI. To this end we should make a static file explorer into our Web application so that we can place jQuery into the template (like /js/jquery-ui.js).

Let's see the directory structure first.

• assets: this directory will be used to serve static files. It consists of css (all CSS files), img (all image files), and js (all javascript files). We put jQuery into that directory.
• gojquery.go: our main application. 
• templates: this directory will serve all template files.

default.tpl

gojquery.go

package main

import (
 "html/template"
 "log"
 "net/http"
)

// this handler will be executed when we use web client 
// to access http://server/display
func handler(w http.ResponseWriter, req *http.Request) {

  // read the whole template
  t, err := template.ParseFiles("templates/default.tpl")

  if err != nil {
    log.Fatal(err)
  }

  // The person's name struct which will be substituted 
  // into the template
  type Person struct {
    Name string
  }

  // put the person name here
  p := Person{Name: "bpdp"}

  // put the name into the template and populate the view
  // w is the response which will be sent to web client
  t.Execute(w, p)

}

func main() {

  // assign the handler (http://server/display)
  http.HandleFunc("/display", handler)

  // put assets dir to serve static files (see dir structure below)
  http.Handle("/", http.FileServer(http.Dir("assets/")))

  // put web server to work, port 8123
  http.ListenAndServe(":8123", nil)

}

Now, to run this Web application, go to the root directory where gojquery.go reside, and run the application:

go run gojquery.go

Try access http://server:8123/ and http://server:8123/display to see the result.

Full source code available at https://github.com/bpdp/go-jquery-example. Enjoy!

Read More [...]

Posted in Go, jQuery, Template, Web Engineering

Slide Presentasi Menggunakan Class Beamer di LaTeX

Membuat slide presentasi menggunakan LaTeX bukan hal yang sulit. Berikut ini saya berikan template yang bisa anda reuse dengan mengganti bagian-bagiannya. Penjelasan saya letakkan langsung di komentar (diawali dengan %). Slide di Beamer disebut dengan Frame. Frame ini bisa hanya satu slide saja atau bisa juga lebih dari satu slide (misalnya di contoh ini adalah di bagian "Outline" / "Table of Contents"). Pada template ini, saya tuliskan banyak frame dengan tujuan untuk contoh outline yang melebihi satu lembar tersebut, isi tidak penting (setidaknya di artikel ini :-D). Outline berisi semua yang didefinisikan di \section dan \subsection. Tiap \section berisi frame ataupun \subsection. Tiap \subsection bisa berisi satu atau lebih frame.

\documentclass{beamer}
\usepackage[latin1]{inputenc}

% tema. warna dan font utk tema juga bisa diatur
\usetheme{Warsaw}
\usecolortheme{beetle}
\usefonttheme{professionalfonts}

% bagian definisi judul 
\title[Comprehensive Examination for Ph.D Research Proposal]{A Web Engineering Methodology and Software Framework for Building Pragmatic Web Application}\author{Bambang Purnomosidi D. P. \\ 10/306654/STK/00301}\institute{STMIK AKAKOM}\date{\today}

% awal presentasi 
\begin{document}

% frame pertama: judul
\begin{frame}
\titlepage
\end{frame}

% daftar isi presentasi. lebih dari satu slide.
% slide pertama: Outline I, slide kedua: Outline II, dst
\begin{frame}[allowframebreaks]{Outline}
\frametitle{Outline}
\tableofcontents
\end{frame}

% mulai bagian ini akan berisi "daftar isi" atau "ouline".
% daftar isi terdiri dari yang tertulis di \section dan \subsection
% lihat di hasil tampilan 
\section{Introduction}

% isi slide hanya "aaa". :))
\subsection{Background}
\begin{frame}
\frametitle{Web Application}
aaa
\end{frame}

\begin{frame}
\frametitle{Web Interaction Patterns}
aaa
\end{frame}

\begin{frame}
\frametitle{The Web: Syntactic, Semantic, and Pragmatic}
aaa
\end{frame}

\subsection{Rationale and Motivating Factors}

\begin{frame}
\frametitle{Rationale and Motivating Factors}
aaa
\end{frame}

\subsection{Problem Formulation and Scope of Problems}

\begin{frame}
\frametitle{Problem Formulation and Scope of Problems}
aaa
\end{frame}

\subsection{Research Novelty}

\begin{frame}
\frametitle{Research Novelty}
aaa
\end{frame} 

\subsection{Research Contributions}

\begin{frame}
\frametitle{Research Contributions}
aaa
\end{frame}

\subsection{Future Directions}

\begin{frame}
\frametitle{Future Directions}
aaa
\end{frame}

\section{Literature Review and Theoretical Foundation}

\subsection{Literature Review}

\begin{frame}
\frametitle{Reference Model and Reference Architecture}
aaa
\end{frame}

\subsection{Web Engineering Methodology and Tool Support}

\begin{frame}
\frametitle{Web Engineering Methodology and Tool Support}
aaa
\end{frame}

\subsection{Semiotics and Web} 

\begin{frame}
\frametitle{Semiotics and Web}
aaa
\end{frame}

\subsection{Theoretical Foundation}

\begin{frame}
\frametitle{Ontology}
aaa
\end{frame} 

\begin{frame}
\frametitle{Semantic Web: Standards and Specifications}
aaa
\end{frame}

\begin{frame}
\frametitle{Research Questions}
aaa
\end{frame}

\section{Research Methodology} 

\subsection{Research Methods}

\begin{frame}
\frametitle{Research Methods}
aaa
\end{frame}

\subsection{Case Study}

\begin{frame}
\frametitle{Case Study}
aaa
\end{frame}

\section{Pilot Study} 

\begin{frame}
\frametitle{Pilot Study}
aaa
\end{frame} 

\section{Research Schedule}

\begin{frame}
\frametitle{Research Schedule}
aaa
\end{frame}

\section{Appendices}

\subsection{Resources}

\begin{frame}
\frametitle{Resources}
aaa
\end{frame}

\subsection{Publication Plan}

\begin{frame}
\frametitle{Publication Plan}
aaa
\end{frame}

\end{document}

Perhatikan hasil berikut ini:

Halaman Judul

Daftar Isi / Outline

Outline I

Outline II

Tampilan slide dengan bagian atas sebagai navigasi

Navigasi di PDF Viewer

Happy presenting!

Read More [...]

Posted in Beamer, LaTeX, Presentation, Template