\documentclass[10pt,a4paper]{article}

% Packages
\usepackage{fancyhdr}           % For header and footer
\usepackage{multicol}           % Allows multicols in tables
\usepackage{tabularx}           % Intelligent column widths
\usepackage{tabulary}           % Used in header and footer
\usepackage{hhline}             % Border under tables
\usepackage{graphicx}           % For images
\usepackage{xcolor}             % For hex colours
%\usepackage[utf8x]{inputenc}    % For unicode character support
\usepackage[T1]{fontenc}        % Without this we get weird character replacements
\usepackage{colortbl}           % For coloured tables
\usepackage{setspace}           % For line height
\usepackage{lastpage}           % Needed for total page number
\usepackage{seqsplit}           % Splits long words.
%\usepackage{opensans}          % Can't make this work so far. Shame. Would be lovely.
\usepackage[normalem]{ulem}     % For underlining links
% Most of the following are not required for the majority
% of cheat sheets but are needed for some symbol support.
\usepackage{amsmath}            % Symbols
\usepackage{MnSymbol}           % Symbols
\usepackage{wasysym}            % Symbols
%\usepackage[english,german,french,spanish,italian]{babel}              % Languages

% Document Info
\author{bogoSort}
\pdfinfo{
  /Title (csc309h5.pdf)
  /Creator (Cheatography)
  /Author (bogoSort)
  /Subject (CSC309H5 Cheat Sheet)
}

% Lengths and widths
\addtolength{\textwidth}{6cm}
\addtolength{\textheight}{-1cm}
\addtolength{\hoffset}{-3cm}
\addtolength{\voffset}{-2cm}
\setlength{\tabcolsep}{0.2cm} % Space between columns
\setlength{\headsep}{-12pt} % Reduce space between header and content
\setlength{\headheight}{85pt} % If less, LaTeX automatically increases it
\renewcommand{\footrulewidth}{0pt} % Remove footer line
\renewcommand{\headrulewidth}{0pt} % Remove header line
\renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit
% This two commands together give roughly
% the right line height in the tables
\renewcommand{\arraystretch}{1.3}
\onehalfspacing

% Commands
\newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour
\newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols
\newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns
\newcommand{\tn}{\tabularnewline} % Required as custom column type in use

% Font and Colours
\definecolor{HeadBackground}{HTML}{333333}
\definecolor{FootBackground}{HTML}{666666}
\definecolor{TextColor}{HTML}{333333}
\definecolor{DarkBackground}{HTML}{A3A3A3}
\definecolor{LightBackground}{HTML}{F3F3F3}
\renewcommand{\familydefault}{\sfdefault}
\color{TextColor}

% Header and Footer
\pagestyle{fancy}
\fancyhead{} % Set header to blank
\fancyfoot{} % Set footer to blank
\fancyhead[L]{
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{C}
    \SetRowColor{DarkBackground}
    \vspace{-7pt}
    {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent
        \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}}
    }
\end{tabulary}
\columnbreak
\begin{tabulary}{11cm}{L}
    \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{CSC309H5 Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{bogoSort} via \textcolor{DarkBackground}{\uline{cheatography.com/58725/cs/15478/}}}
\end{tabulary}
\end{multicols}}

\fancyfoot[L]{ \footnotesize
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{LL}
  \SetRowColor{FootBackground}
  \mymulticolumn{2}{p{5.377cm}}{\bf\textcolor{white}{Cheatographer}}  \\
  \vspace{-2pt}bogoSort \\
  \uline{cheatography.com/bogosort} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Not Yet Published.\\
   Updated 14th April, 2018.\\
   Page {\thepage} of \pageref{LastPage}.
\end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}}  \\
  \SetRowColor{white}
  \vspace{-5pt}
  %\includegraphics[width=48px,height=48px]{dave.jpeg}
  Measure your website readability!\\
  www.readability-score.com
\end{tabulary}
\end{multicols}}




\begin{document}
\raggedright
\raggedcolumns

% Set font size to small. Switch to any value
% from this page to resize cheat sheet text:
% www.emerson.emory.edu/services/latex/latex_169.html
\footnotesize % Small font.

\begin{multicols*}{3}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{PostgreSQL}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Common Data Types}}: \newline % Row Count 1 (+ 1)
INTEGER, FLOAT \newline % Row Count 2 (+ 1)
VARCHAR(n): varying length character string of maximum length n \newline % Row Count 4 (+ 2)
DATE: A date attribute in a DBMS-specific format. \newline % Row Count 5 (+ 1)
{\bf{Sample Use Case}}: \newline % Row Count 6 (+ 1)
Create a table of students holding student IDs and names. Create another table that shows which student IDs are taking which courses: \newline % Row Count 9 (+ 3)
{\emph{CREATE TABLE Student(id INTEGER, name VARCHAR(20));}} \newline % Row Count 11 (+ 2)
{\emph{CREATE TABLE Takes(id INTEGER, course VARCHAR(20));}}  \newline % Row Count 13 (+ 2)
{\bf{Data Manipulation}} \newline % Row Count 14 (+ 1)
Add a new student: \newline % Row Count 15 (+ 1)
{\emph{INSERT INTO Student (id, name) VALUES (003841201, 'Zingaro', 'Daniel');}} \newline % Row Count 17 (+ 2)
Update rows in a table (set a certain student's name based on id): \newline % Row Count 19 (+ 2)
{\emph{UPDATE Student SET name = "Gilfoyle" WHERE id = '1337';}} \newline % Row Count 21 (+ 2)
Delete students named "Bob Jones" from the table: \newline % Row Count 22 (+ 1)
{\emph{DELETE FROM Student WHERE name = 'Bob Jones';}} \newline % Row Count 23 (+ 1)
{\bf{Find everyone taking CSC309:}} \newline % Row Count 24 (+ 1)
{\emph{SELECT name FROM Student, Takes WHERE Student.id = Takes.id AND Takes.course = 'CSC309';}} \newline % Row Count 26 (+ 2)
{\bf{PHP commands}} \newline % Row Count 27 (+ 1)
{\emph{\$conn = \$db\_connect("\$connect\_string");}} \newline % Row Count 28 (+ 1)
{\emph{\$result = \$pg\_query(\$conn, \$query);}} \newline % Row Count 29 (+ 1)
{\emph{ while (\$row = \seqsplit{\$pg\_fetch\_array(\$result))} \{ do something \} }} \newline % Row Count 31 (+ 2)
} \tn 
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{PostgreSQL (cont)}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{If we're going through a list of students, {\emph{ \$row{[}id{]} }} is equivalent to Student.id in above example.% Row Count 3 (+ 3)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{HTTP Commands}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}!-{}- GET a specified resource, DELETE a specified resource, HEAD get the response headers (without associated data), PUT accompanying data at the specified location, POST accompanying data as a subordinate to the specified location. !-{}-\textgreater{} \newline  \newline {\bf{AUTHENTICATION REQUEST}}: \newline GET /\textasciitilde{}arnold/309/phttp/hello.html HTTP/1.1 \newline Host: www.cs.toronto.edu \newline Authorization: Basic YXJub2xkOnByb2Y= \newline  \newline YXJub2xkOnByb2Y is a Base64 encoding of userid:password.} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{CSS Example}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{// selected navigation bar, do stuff to it \newline nav \{ \newline         position: absolute; top: 52px; left:0; \newline width: 160px; height: 700px; \newline  \newline \} \newline // now each individual button \newline nav a \{ \newline display: block; \newline border-color: blue; \newline border-style: solid; \newline background-color: \#ACE; \newline text-align: center; \newline white-space: nowrap; \newline padding: 10px; \newline margin-bottom: 0.25em; \newline color:black; \newline \}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Vote App (vote.js - Express)}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\seqsplit{require('./static-content/lib/constants.js');} // defines wwPort and wwWsPort \newline  \newline var express = require('express'); \newline var app = express(); \newline var votes = \{ yes:0 , no:0 \} ; \newline // Web sockets to broadcast results \newline  \newline var WebSocketServer = require('ws').Server \newline    ,wss = new WebSocketServer(\{port: wwWsPort\}); \newline  \newline wss.on('close', function() \{ \newline     \seqsplit{console.log('disconnected');} \newline \}); \newline  \newline wss.broadcast = function()\{ \newline         for(let ws of this.clients)\{ \newline                 \seqsplit{ws.send(JSON.stringify(votes));} \newline         \} \newline \} \newline  \newline wss.on('connection', function(ws) \{ \newline         \seqsplit{ws.send(JSON.stringify(votes));} \newline \}); \newline  \newline  \newline var bodyParser = require('body-parser'); \newline app.use(bodyParser.json()); // support json encoded bodies \newline app.use(bodyParser.urlencoded(\{ extended: true \})); // support encoded bodies \newline  \newline app.use(express.static('static-content'));  \newline  \newline app.put('/api/vote/:value/', function (req, res) \{ \newline 	var voteValue = req.params.value; \newline 	if(voteValue=="yes")votes.yes++; \newline 	if(voteValue=="no")votes.no++; \newline 	 \newline 	console.log("PUT:"+voteValue); \newline 	console.log("Total Votes so far:"+votes); \newline 	var result = \{ result: "ok" , currentVotes: votes\}; \newline 	console.log(JSON.stringify(result)); \newline 	res.json(result); \newline 	wss.broadcast(); \newline \}); \newline  \newline app.listen(wwPort, function () \{ \newline   	console.log('Example app listening on port '+wwPort); \newline \});} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Vote App (vote.html - React, Sockets, REST)}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}script type="text/javascript"\textgreater{} \newline          \newline                         var socket; \newline  \newline                         \$(function()\{ \newline                                 // socket = new \seqsplit{WebSocket("ws://cslinux.utm.utoronto.ca:10001");} \newline 				alert(global.wwWsURL); \newline                                 socket = new \seqsplit{WebSocket(global.wwWsURL);} \newline                                 socket.onopen = function (event) \{ \newline                                         \seqsplit{console.log("connected");} \newline                                 \}; \newline                                 socket.onclose = function (event) \{ \newline                                         alert("closed code:" + event.code + " reason:" +event.reason + " \seqsplit{wasClean:"+event.wasClean);} \newline                                 \}; \newline                                 socket.onmessage = function (event) \{ \newline                                         var \seqsplit{votes=JSON.parse(event.data);} \newline 					\$("\#VoteCount").html("Yes:"+votes.yes+" "+"No:"+votes.no); \newline                                 \}; \newline                         \}); \newline                 \textless{}/script\textgreater{} \newline  \newline 		\textless{}script type="text/javascript"\textgreater{} \newline 			function sendVote(vote)\{ \newline         			\$.ajax(\{ \newline                 			method: "PUT", \newline                 			url: "/api/vote/"+vote \newline         			\}).done(function(data)\{ \newline                 			console.log("Got \seqsplit{back:"+JSON.stringify(data));} \newline         			\}); \newline 			\} \newline 		\textless{}/script\textgreater{} \newline  		 \newline 		\textless{}script type="text/babel"\textgreater{} \newline 			class VoteButton extends React.Component \{ \newline 				constructor(props) \{ \newline 					super(props); \newline 				\} \newline 				render(props)\{ \newline 					return ( \newline 						\textless{}button onClick=\{this.props.clickHandler\} \textgreater{} \{ this.props.label \} \textless{}/button\textgreater{} \newline 					); \newline 				\} \newline 			\} \newline 			class VoteComponent extends React.Component \{ \newline 				constructor(props) \{ \newline 					super(props); \newline 					this.state = \{ \} \newline 					this.yesClickHandler = \seqsplit{this.yesClickHandler.bind(this);} \newline 					this.noClickHandler = \seqsplit{this.noClickHandler.bind(this);} \newline 				\} \newline 				yesClickHandler(e)\{ \newline 					sendVote("yes"); \newline 					console.log("yes"); \newline 				\} \newline 				noClickHandler(e)\{ \newline 					sendVote("no"); \newline 					console.log("no"); \newline 				\} \newline 				render()\{ \newline 					return (   \newline 						\textless{}div style=\{\{border:"1px solid black"\}\} \textgreater{}  \newline 							\{ this.props.proposition \} \newline 							\textless{}VoteButton clickHandler=\{this.yesClickHandler\} label="yes" /\textgreater{} \newline 							\textless{}VoteButton clickHandler=\{this.noClickHandler\} label="no" /\textgreater{} \newline 						\textless{}/div\textgreater{} \newline 					); \newline 				\} \newline 			\} \newline 			ReactDOM.render( \textless{}VoteComponent proposition="Want a poll?"/\textgreater{}, \seqsplit{document.getElementById("VOTE"));} \newline 		\textless{}/script\textgreater{} \newline 	\textless{}/head\textgreater{}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Mongo}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{// CREATE \newline db.students.insert(\{"id" : 1003675901, "name" : "Erlich Bachmann"\}) \newline  \newline // RETRIEVE \newline db.students.find( \{ "name": "Erlich Bachmann" \} ).pretty()    // find student with name Erlich Bachmann... pretty() makes easy to read. .count() counts Erlichs \newline  \newline // other operators \$gt, \$lt, \$eq, \$gte, ...  \newline db.students.find( \{ "id" : \{ \$gt : "100" \} \} )     // students with id \textgreater{} 100 \newline  \newline // OR conditions \newline db.restaurants.find( \newline    \{ \$or: {[} \{ "cuisine": "Italian" \}, \{ "address.zipcode": "10075" \} {]} \} \newline ) \newline  \newline // sort results \newline db.restaurants.find().sort( \{ "borough": 1, "address.zipcode": 1 \} ) // 1 = increasing, -1 = decreasing \newline  \newline // UPDATE  \newline db.restaurants.update( \newline   \{ "restaurant\_id" : "41156888" \}, \newline   \{ \$set: \{ "address.street": "East 31st Street" \} \} \newline ) \newline  \newline // DELETE \newline db.restaurants.remove( \{ "borough": "Manhattan" \} ) // remove all matching criteria \newline db.restaurants.remove( \{ \} ) // leaves the collection empty \newline db.restaurants.drop() // remove the collection} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


% That's all folks
\end{multicols*}

\end{document}