Major

Web

Project

Design and Interactive Prototype

DEMO

WHY

• Started a business with a colleague
• Working with landscape architecture
• Noise barriers and city planning

WHAT & HOW

• Design i Gravit.io
• Interactive prototype in Invision

Implementation

DEMO

WHAT

Same as prototype

+ Easy access to edit posts for my partner

WHY

HOW

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
    <?php $carousel_post = new WP_Query(array('tag' => 'carousel')); ?>
    <?php if ($carousel_post->have_posts()) : while ($carousel_post->have_posts()) : $carousel_post->the_post(); ?>
        <div class="item">
            <img src="<?php the_post_thumbnail_url(); ?>" class="img-responsive" alt="gis">
            <div class="carousel-caption">
                <h3><?php the_title(); ?></h3>
                <p><?php the_content(); ?></p>
            </div>
        </div>
    <?php endwhile; ?>
    <?php endif; ?>
</div>

<?php $page = get_post( 9 ); ?>
<div class="row">
    <h1>
        <?php echo apply_filters('the_title', $page->post_title); ?>
    </h1>
</div>
<div class="row">
    <p>
        <?php echo apply_filters('the_content', $page->post_content); ?>
    </p>
</div>

LOOP

GET POST

Enhancements

• Contact section is hardcoded
• Integrate single.php content in bootstrap modal, keeping the user on the same page.

• More robust way to get pages content then from id or title. If a page is by mistake deleted and created again, the parameter in get_post(  param ) has to be changed in the index.php

• Autogenerate navbar-nav li and sections looping through pages

Creative Implementation of a Web App

WHY

• Give municipality employees overview of changes in business sector
• Data is free, no need to buy products
• Enhance collaboration between municipalities

WHAT

Demo

jsGrid

HOW

• Started out in Angular 2

• Got a couple of components and services up and running

• Too much trouble getting thirdparty libraries working

• Shifted to jQuery/Bootstrap application using MVC

Model View Conntroller

  cvr: function(komkode) {
    var url = "https://drayton.mapcentia.com/api/v1/sql/ballerup?q=SELECT * FROM cvr.flyttemoenster_geom2("  + komkode + ")"
    //returning ajax object for done method in controller
    return $.ajax({
      url: url,
      type: 'GET',
      dataType: 'jsonp',
      success: function(response) {
        $.each(response.features, function(index, el) {
          //add data to global data array
          data.push(el.properties);
        });
      }
    });
  }

Working with the API

getCvr: function(komkode) {
    //emptying array
    data = [];
    model.cvr(komkode).done(function() {
      view.renderTable();
      contoller.csv();
      view.downloadCsv();
      view.afterAjax();
    });
  }

 Model

Controller

View

  renderTable: function() {
    $("#jsGrid").jsGrid({
      width: "100%",
      sorting: true,
      data: data,
      rowClick: function(item) {
        window.open("https://datacvr.virk.dk/data/visenhed?enhedstype=produktionsenhed&id=" + item.item.pnr, '_blank');
      },
      fields: [
        ...
      ]
    });
  }

Backend

CREATE OR REPLACE FUNCTION cvr.flyttemoenster_geom(IN komkode integer)
  RETURNS TABLE(status text, virksomhed_cvrnr bigint, pnr bigint, hovedbranche_tekst character varying, navn_tekst character varying, kommune_kode smallint, beliggenhedsadresse_vejnavn character varying, belig_adresse_husnummerfra bigint, beliggenhedsadresse_postnr bigint, belig_adresse_postdistrikt character varying, email_kontaktoplysning character varying, livsforloeb_startdato timestamp without time zone, x double precision, y double precision, indlaest_dato date) AS
$BODY$

WITH cvr_aktuel AS (
         SELECT cvr_prod_enhed_geo.virksomhed_cvrnr,
            cvr_prod_enhed_geo.pnr,
            cvr_prod_enhed_geo.hovedbranche_tekst,
            cvr_prod_enhed_geo.navn_tekst,
            cvr_prod_enhed_geo.kommune_kode,
            cvr_prod_enhed_geo.beliggenhedsadresse_vejnavn,
            cvr_prod_enhed_geo.belig_adresse_husnummerfra,
            cvr_prod_enhed_geo.beliggenhedsadresse_postnr,
            cvr_prod_enhed_geo.belig_adresse_postdistrikt,
            cvr_prod_enhed_geo.email_kontaktoplysning,
            cvr_prod_enhed_geo.livsforloeb_startdato,
            st_x(st_transform(geom, 4326)) x,
            st_y(st_transform(geom, 4326)) y,
            indlaest_dato
           FROM cvr.cvr_prod_enhed_geo
          WHERE cvr_prod_enhed_geo.indlaest_dato = date_trunc('month'::text, now())::date
        ), cvr_sidste_md AS (
         SELECT cvr_prod_enhed_geo.virksomhed_cvrnr,
            cvr_prod_enhed_geo.pnr,
            cvr_prod_enhed_geo.hovedbranche_tekst,
            cvr_prod_enhed_geo.navn_tekst,
            cvr_prod_enhed_geo.kommune_kode,
            cvr_prod_enhed_geo.beliggenhedsadresse_vejnavn,
            cvr_prod_enhed_geo.belig_adresse_husnummerfra,
            cvr_prod_enhed_geo.beliggenhedsadresse_postnr,
            cvr_prod_enhed_geo.belig_adresse_postdistrikt,
            cvr_prod_enhed_geo.email_kontaktoplysning,
            cvr_prod_enhed_geo.livsforloeb_startdato,
            st_x(st_transform(geom, 4326)) x,
            st_y(st_transform(geom, 4326)) y,            
            indlaest_dato
           FROM cvr.cvr_prod_enhed_geo
          WHERE cvr_prod_enhed_geo.indlaest_dato = date_trunc('month'::text, now() - '1 mon'::interval)::date
        )
 SELECT 'Tilflytter'::text AS flyttemoenster, a.*
   FROM cvr_aktuel a
     LEFT JOIN cvr_sidste_md b ON a.pnr = b.pnr
  WHERE a.kommune_kode = komkode AND a.kommune_kode <> b.kommune_kode
UNION
 SELECT 'Fraflytter'::text AS flyttemoenster, a.*
   FROM cvr_aktuel a
     RIGHT JOIN cvr_sidste_md b ON a.pnr = b.pnr
  WHERE b.kommune_kode = komkode AND a.kommune_kode <> b.kommune_kode
UNION
 SELECT 'Nystartet'::text AS flyttemoenster, a.*
   FROM cvr_aktuel a
  WHERE a.kommune_kode = komkode AND a.livsforloeb_startdato > date_trunc('month'::text, now() - '1 mon'::interval)::date
UNION
 SELECT 'Ophørt'::text AS flyttemoenster, b.*
   FROM cvr_aktuel a
     RIGHT JOIN cvr_sidste_md b ON a.pnr = b.pnr
  WHERE b.kommune_kode = komkode AND a.pnr IS NULL

$BODY$
  LANGUAGE sql VOLATILE

https://drayton.mapcentia.com/api/v1/sql/ballerup?q=SELECT * FROM cvr.flyttemoenster_geom2(151)

ISSUES

Github