web dev

webdev.js

// 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;
}