AngularJS Project Template and Apache 2.2/2.4 setup

On my Github, I've created an AngularJS project template that sets up Grunt, LibSass, and HTML5Mode.

https://github.com/pbrizardo/grunt_libsass_angular_scaffold

Setting up Apache 2.2/2.4 to support Html5Mode

Use Apache's mod_rewrite to forward the index.html for any URL requests through the use of rewrite rules.

1) Put all rewrite rules in httpd.conf.
2) Edit httpd.conf and put rewrite rules in .htaccess

Method 1 will be more convenient since all changes are done in one file.
Method 2 might be convenient for those who want different rewrite behavior in different applications (Never tried this)

Method 1

1. Open httpd.conf
2. Find the Directory tag for the served documents.

Ex. <Directory "/apache2.2/htdocs"> or <Directory "var/www">

3. Add the following rules:
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !index
    RewriteCond %{REQUEST_URI} !.*\.(css|js|html|png)
    RewriteRule (.*) index.html [L]

4. Make sure AllowOverride None is set

That's it!

Method 2

1. Open httpd.conf
2. Inside the <Directory /> tag, make sure it has the follow options:

<Directory />
    Options All
    AllowOverride All
</Directory>

3. Change all instances of AllowOverride None to AllowOverride All
4. Open .htaccess file
5. Insert the following at the end of the file

<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !index
    RewriteCond %{REQUEST_URI} !.*\.(css|js|html|png)
    RewriteRule (.*) index.html [L]
</ifModule>

6. If running Apache 2.4, go to the next step, otherwise, you're done!
7. Due to change in new directives access control modules, directives such as Order, Deny, and Satisfy have been replaced

http://httpd.apache.org/docs/2.4/upgrading.html

So you'll find the old directives under the tag  <FilesMatch "(^#.*#|\.(bak|config|dist|fla|inc|ini|log|psd|sh|sql|sw[op])|~)$">

Replace all directives with

Require all denied

AngularJS, Spring MVC, Tuckey URL Rewrite

I wanted to use html5Mode with an existing Spring MVC backend. This assumes that the front-end code will be deployed as part of the WAR file.

I did the following steps:

1. In Angular, I added the following html5Mode config:

$locationProvider.html5Mode(true).hashPrefix('!');

2. In Spring MVC, I added the Tuckey URL Rewrite Module in the Maven pom.xml:

<dependency>
<groupId>org.tuckey</groupId>
<artifactId>urlrewritefilter</artifactId>
<version>3.0.4</version>
</dependency>

3. Do a Maven Update 4. Open the web.xml and enter the following within the web-app tag (I left the debug line there)

<filter>
<filter-name>UrlRewriteFilter</filter-name>
<filter-class>org.tuckey.web.filters.urlrewrite.UrlRewriteFilter</filter-class>
<init-param>
<param-name>logLevel</param-name>
<param-value>DEBUG</param-value>
</init-param>
</filter>

<filter-mapping>
<filter-name>UrlRewriteFilter</filter-name>
<url-pattern>/*</url-pattern>
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher>
</filter-mapping>

5. Create a urlrewrite.xml under the WEB-INF folder of the your Spring project and the contents should look like the following:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE urlrewrite PUBLIC "-//tuckey.org//DTD UrlRewrite 4.0//EN"
"http://www.tuckey.org/res/dtds/urlrewrite4.0.dtd">

<!--

Configuration file for UrlRewriteFilter
http://www.tuckey.org/urlrewrite/

-->
<urlrewrite>

<rule>
<from>^/mypage$</from>
<to>/index.html</to>
</rule>

</urlrewrite>


And that is it! I had trouble before cause I was using 'index.html' in the 'to' tag instead of '/index.html'

[HTML/CSS] Bottom footer for reference

Yea! For once and for all, the bottom footer has been solved. I'm such a noob. Here is my reference to an example:

http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/

The only quirk I had once an extra spacing that was occurring at the bottom of the page. To help this, I added overflow:hidden to the wrapper container.

Cheers

NodeJS,SVN Problems

I'll try to spill out my frustrations at the top of my head.

Getting ECONNRESET when doing npm install

Getting this error flag showing up on your screen sucks. To fix, you need to edit the registry URL in the user config file by typing npm config edit and changing the https in the URL to http.

Getting Certificate Expiration date in Eclipse SVN or tortoise

In Windows, search for {User}/AppData/Roaming/Subversive/auth or something along those lines. Delete all the subfolders in the directory, then try to perform actions to the repository. It may ask for your credentials again, so prepare yourself.

[HTML/CSS/Javascript] Floating header/scrollable body

So you want to build something like this....

Header

Scrollable Body

When content vertically overflows, the expected outcome is this (red is the scrollbar):

Header
Scrollable Body

So in the early versions of Internet Explorer, it expresses evilness like so:

Header

Scrollable Body

So yea. The only way to make IE behave properly is to use conditional CSS properties and native javascript. I would use jQuery because I'm noob, but I got too lazy to find the CDN link.

Here is the code below:

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if (gt IE 8)|!(IE)]><!-->
<html class="">
<!--<![endif]-->

<head>
    <title>Floating Header</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #container {
            width: 100%;
            height: 100%;
            position: relative;
        }
        #header {
            width: 100%;
            height: 120px;
            background: blue;
            position: absolute;
            top: 0;
            left: 0
        }
        #content-scroll-container {
            overflow: auto;
            overflow-x: hidden;
            background: black;
            width: 100%;
            height: 100%;
            padding: 0;
        }
        #content {
            margin-top: 120px;
            color: white;
        }
        .tbl-whole-span {
            width: 100%;
            margin: 0;
            padding: 0;
        }
        .tbl-whole-span td {
            background: gray;
        }
    </style>
</head>

<body>

    <div id="container">
        <div id="header"></div>
        <div id="content-scroll-container">
            <div id="content">
                First line of destruction
                <br/>
                <input id="btnAddLine" type="button" value="Add Line" onclick="addLine()" />
                <br/>
                <table class="tbl-whole-span">
                    <tr>
                        <td>
                            Some table contents here.
                            <span style="float:right">Text to the right</span>
                        </td>
                    </tr>
                </table>
                Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>
            </div>
        </div>
    </div>
    <script>
        ;
         // Adjust content width when vert scrollbar appears
        function adjustWidth() {
            var scrollDiv = document.getElementById("content-scroll-container");
            var contentDiv = document.getElementById("content");
            var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
            var newWidth = scrollDiv.offsetWidth - scrollbarWidth;
            var percentageWidth = newWidth * 100.00 / scrollDiv.offsetWidth;
            contentDiv.style.width = percentageWidth + "%";
        }

         // Function to add content. This function relies on calling
         // adjustWidth.
        function addLine() {
            var content = document.getElementById("content");
            content.innerHTML += "Line Added<br />";

            // Detect version of IE here. Modify if needed. 
            var html = document.getElementsByTagName("html")[0];
            if (html.className != "")
                adjustWidth(); // adjust width only if class is IE
        }
    </script>
</body>

</html>

[MySQL] Grouping Intervals and counting columns

Say you have table like this...

id	code	dateactivity
1	200	2014/06/04
2	200	2014/05/04
3	500	2014/04/04
4	504	2014/05/28

...and now you want to get the past 7 days but count how many times 200 (success code) comes up and how many times a number other than 200 (failure code) comes up. So the idea is simple. Get total of success + failure codes, left outer join for success, left outer join for failure. The filter where the date is more the the current day minus 7 days. At the end, you should return a row that has the day, total count, success count, and failure count. the Got it? Yes you do. You're a trooper. Here is a sample:

select STR_TO_DATE(a.period, '%m-%d-%y') as period, ifnull(a.cnt,0) total, ifnull(b.cnt,0) success, ifnull(c.cnt,0) failure 
from
(
select
date_format(dateactivity , '%m-%d-%y') period,
count(*) cnt
from mytable
where dateactivity >= DATE_ADD(NOW(), INTERVAL -7 DAY)
group by date_format(dateactivity , '%m-%d-%y')
) a 
left outer join
(
select
date_format(dateactivity , '%m-%d-%y') period,
count(*) cnt
from mytable
where code = '200'
and dateactivity >= DATE_ADD(NOW(), INTERVAL -7 DAY)
group by date_format(dateactivity , '%m-%d-%y')
) b on a.period = b.period 
left outer join
(
select
date_format(dateactivity , '%m-%d-%y') period,
count(*) cnt
from mytable
where (code != '200' or code is null)
and dateactivity >= DATE_ADD(NOW(), INTERVAL -7 DAY)
group by date_format(dateactivity , '%m-%d-%y')
) c on a.period = c.period
;

I know that there are probably different ways of doing this. If you know how, please share. Sharing is caring. And I care for all.

[Java/Spring/Maven] Making JSTL work!!!!

Here are some settings to check to make sure JSTL works in your project. I'm using JSTL 1.1.2 and

Pom.xml dependencies ( Just dumping all dependencies including non-jstl related ones )

 <dependencies>
   <!-- Spring dependencies -->
 <dependency>
  <groupId>org.springframework</groupId>
 <artifactId>spring-aop</artifactId>
 <version>${spring.maven.artifact.version}</version>
 </dependency>
 <dependency>
  <groupId>org.springframework</groupId>
  <artifactId>spring-beans</artifactId>
  <version>${spring.maven.artifact.version}</version>
 </dependency>
 <dependency>
  <groupId>org.springframework</groupId>
  <artifactId>spring-context</artifactId>
  <version>${spring.maven.artifact.version}</version>
 </dependency>
 <dependency>
  <groupId>org.springframework</groupId>
  <artifactId>spring-context-support</artifactId>
  <version>${spring.maven.artifact.version}</version>
 </dependency>
 <dependency>
  <groupId>org.springframework</groupId>
  <artifactId>spring-core</artifactId>
  <version>${spring.maven.artifact.version}</version>
 </dependency>
 <dependency>
  <groupId>org.springframework</groupId>
  <artifactId>spring-jdbc</artifactId>
  <version>${spring.maven.artifact.version}</version> 
    </dependency>       
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-orm</artifactId>
        <version>${spring.maven.artifact.version}</version>
    </dependency>       
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-test</artifactId>
        <version>${spring.maven.artifact.version}</version>
    </dependency>       
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-tx</artifactId>
        <version>${spring.maven.artifact.version}</version>
    </dependency>      
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-web</artifactId>
        <version>${spring.maven.artifact.version}</version>
    </dependency>               
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</artifactId>
        <version>${spring.maven.artifact.version}</version>
    </dependency> 
   <!-- JSP, Servlet, JSTL dependencies -->
 <dependency>
  <groupId>javax.servlet</groupId>
  <artifactId>servlet-api</artifactId>
  <version>${version.javax.servlet}</version>
 </dependency>
 <dependency>
  <groupId>javax.servlet.jsp</groupId>
  <artifactId>jsp-api</artifactId>
  <version>${version.javax.servlet.jsp}</version>
 </dependency>
 
 <dependency>
            <groupId>xmlbeans</groupId>
            <artifactId>xbean</artifactId>
            <version>2.2.0</version>
        </dependency>
 <dependency>
  <groupId>javax.servlet</groupId>
  <artifactId>jstl</artifactId>
  <version>${version.javax.servlet.jstl}</version>
 </dependency>
 <dependency>
      <groupId>taglibs</groupId>
      <artifactId>standard</artifactId>
      <version>1.1.2</version>
      <scope>compile</scope>
    </dependency>
   <!--  Codehaus Jackson dependencies -->
   <dependency>
        <groupId>org.codehaus.jackson</groupId> 
        <artifactId>jackson-core-asl</artifactId> 
       <version>1.9.1</version>
    </dependency>    
    <dependency>
        <groupId>org.codehaus.jackson</groupId> 
        <artifactId>jackson-jaxrs</artifactId> 
        <version>1.9.1</version>
    </dependency>    
    <dependency>
        <groupId>org.codehaus.jackson</groupId> 
        <artifactId>jackson-mapper-asl</artifactId> 
        <version>1.9.1</version>
    </dependency>    
    <dependency>
        <groupId>org.codehaus.jackson</groupId>
        <artifactId>jackson-mapper-lgpl</artifactId>
        <version>1.9.1</version>
    </dependency>
    <!-- Jettison -->
    <dependency>
        <groupId>org.codehaus.jettison</groupId>
        <artifactId>jettison</artifactId>
        <version>1.3.1</version>
    </dependency>
    <!-- Apache Datasource -->
    <dependency>
  <groupId>commons-dbcp</groupId>
  <artifactId>commons-dbcp</artifactId>
  <version>1.2.2</version>
 </dependency>
    <!--  Oracle Driver -->
     <dependency> 
         <groupId>com.oracle</groupId>
         <artifactId>ojdbc14</artifactId>
         <version>10.2.0.4.0</version>
     </dependency>
    
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
    </dependency>
  </dependencies>
  <build>
    <finalName>myspringproject</finalName>
  </build>
  <properties>
   <spring.maven.artifact.version>2.5.6</spring.maven.artifact.version>
   <version.javax.servlet>2.4</version.javax.servlet>
   <version.javax.servlet.jstl>1.1.2</version.javax.servlet.jstl>
   <version.javax.servlet.jsp>2.1</version.javax.servlet.jsp>
  </properties>

JSP taglibs/charset (utf-8)

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %> 
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Postman</title>
</head>
<body>

web.xml
The web-app attribute to configure the version might start giving you an error saying that the Dynamic Web Module cannot convert to <some version>. If you encounter this, right-click your project in the Project Explorer, go to the Project Facets, uncheck the Dynamic Web Module, Hit OK, and Update Maven Project. If you have the code below, it will set it as the assign version I believe.

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">