Skip to content

Instantly share code, notes, and snippets.

@jackmott jackmott/webdev.js
Last active May 11, 2016

Embed
What would you like to do?
web dev
// All you want to do is take a table in the database
// and show it as a table in the browser.
// How hard could it be?
// First you gotta know SQL or whatever other language/syntax your
// database uses to query it
var query = "SELECT TOP 100 * FROM THINGS ORDER BY DATE"
// Then you gotta import and learn to use some database driver to talk to your database
// Or alternatively learn to use its REST api and work with whatever format it returns
// (xml? json? custom?)
DBObject db = LoadLargeDBLibrary();
// And to work with this database library and do everything else
// You have to learn whatever middle tier language your project
// uses (C#/Java/Python/Node etc) and better hope it has a driver
// for your preferred database! Or you gotta make your own!
DataTable dataTable = db.runQuery(query);
// If you actually want to process the data from
// the database in some way you need to deserialize
// it into your own data structures. You will either have
// to do this by hand or use an ORM which range from
// moderately large to huge libraries which again have their
// own learning curve
List<Thing> things = MakeObjects(dataTable);
// Now you get to actually write code!
DoBusinessLogic(things);
// Now you have to send things to the browser
// Time to transform data again! Ever play the game
// telephone?
// You will need to serialize the data to JSON or HTML
// typically so browser can use it. This necessitates
// another library, which you have to learn and customize
// or roll your own!
Json jthings = NewtonSoft.makeItJson(things);
// Now over on the browser you gotta learn another
// language - javascript! Unless you used that on the
// server too
// Turning json into useful widgets often means
// more libraries to learn!
$.ajax({
url: "/ajax/getthings",
type: "GET",
data: payload,
success: DataTable.TurnJSONIntoHTML(payload,"ThingTable");
});
// And of course you will need to understand
// HTML to work with all of this
<table width="575px" class="table datatable display table-hover dataTable" role="grid" cellspacing="0" id="ThingTable">
<thead>
<tr>
<th>Thing Name</th>
<th>Thing Type</th>
<th>Start Date</th>
<th>End Date</th>
<th style="width:30px">Kill Thing</th>
</tr>
</thead>
</table>
// And if you want the table to look nice you better
// know some CSS
.table > caption + thead > tr:first-child > td,
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > td,
.table > thead:first-child > tr:first-child > th {
font-weight: bold;
border-bottom: 1px solid #909ca7;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.