Devops everywhere

Angular Material Data Table: A Complete Example (Server Pagination, Filtering, Sorting)

2018-03-23T03:33:00.001-04:00

In this post, we are going to go through a complete example of how to use the Angular Material Data Table.
We are going to cover many of the most common use cases that revolve around the Angular Material Data Table component, such as: server-side pagination, sorting, and filtering.
This is a step-by-step tutorial, so I invite you to code along as we are going to start with a simple initial scenario. We will then progressively add features one by one and explain everything along the way (including gotchas).
We will learn in detail all about the reactive design principles involved in the design of the Angular Material Data Table and an Angular CDK Data Source.
The end result of this post will be:

a complete example of how to implement an Angular Material Data Table with server-side pagination, sorting and filtering using a custom CDK Data Source
a running example available on Github, which includes a small backend Express server that serves the paginated data

In this post, we will cover the following topics:

The Angular Material Data Table - not only for Material Design
The Material Data Table Reactive Design
The Material Paginator and Server-side Pagination
Sortable Headers and Server-side Sorting
Server-side Filtering with Material Input Box
A Loading Indicator
A Custom Angular Material CDK Data Source
Source Code (on Github) with the complete example
Conclusions

So without further ado, let's get started with our Material Data Table Guided Tour!

Importing Angular Material modules

In order to run our example, let's first import all the Angular Material modules that we will need:

      
        import { MatInputModule, MatPaginatorModule, MatProgressSpinnerModule,
      
        MatSortModule, MatTableModule } from "@angular/material";
      
        @NgModule({
      
        declarations: [
      
        ... 
      
        ],
      
        imports: [
      
        BrowserModule,
      
        BrowserAnimationsModule,
      
        HttpClientModule,
      
        MatInputModule,
      
        MatTableModule,
      
        MatPaginatorModule,
      
        MatSortModule,
      
        MatProgressSpinnerModule
      
        ],
      
        providers: [
      
        ...
      
        ],
      
        bootstrap: [AppComponent]
      
        })
      
        export class AppModule {
      
        }

view raw 01.ts hosted with ❤ by GitHub

Here is a breakdown of the contents of each Material module:

MatInputModule: this contains the components and directives for adding Material design Input Boxes to our application (needed for the search input box)
MatTableModule: this is the core data table module, which includes the mat-table component and many related components and directives
MatPaginatorModule: this is a generic pagination module, that can be used to paginate data in general. This module can also be used separately from the Data table, for example for implementing Detail pagination logic in a Master-Detail setup
MatSortModule: this is an optional module that allows adding sortable headers to a data table
MatProgressSpinnerModule: this module includes the progress indicator component that we will be using to indicate that data is being loaded from the backend

Introduction to the Angular Material Data Table

The Material Data Table component is a generic component for displaying tabulated data. Although we can easily give it a Material Design look and feel, this is actually not mandatory.
In fact, we can give the Angular Material Data table an alternative UI design if needed. To see that this is so, let's start by creating a Data Table where the table cells are just plain divs with no custom CSS applied.
This data table will display a list of course lessons, and has 3 columns (sequence number, description and duration):

      
        <mat-table class="lessons-table mat-elevation-z8" [dataSource]="dataSource">
      
        <ng-container matColumnDef="seqNo">
      
        <div *matHeaderCellDef>#</div>
      
        <div *matCellDef="let lesson">{{lesson.seqNo}}</div>
      
        </ng-container>
      
        <ng-container matColumnDef="description">
      
        <div *matHeaderCellDef>Description</div>
      
        <div class="description-cell"
      
        *matCellDef="let lesson">{{lesson.description}}</div>
      
        </ng-container>
      
        <ng-container matColumnDef="duration">
      
        <div *matHeaderCellDef>Duration</div>
      
        <div class="duration-cell"
      
        *matCellDef="let lesson">{{lesson.duration}}</div>
      
        </ng-container>
      
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      
        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
      
        </mat-table>

view raw 02.html hosted with ❤ by GitHub

Material Data Table Column Definitions

As we can see, this table defines 3 columns, each inside its own ng-container element. The ng-container element will NOT be rendered to the screen (see this post for more details), but it will provide an element for applying the matColumnDef directive.
The matColumnDef directive uniquely identifies a given column with a key: seqNo, description or duration. Inside the ng-container element, we will have all the configuration for a given column.

Notice that the order of the ng-container elements does NOT determine the column visual order

The Material Data Table Auxiliary Definition Directives

The Material Data Table has a series of auxiliary structural directives (applied using the *directiveName syntax) that allow us to mark certain template sections has having a certain role in the overall data table design.
These directives always end with the Def postfix, and they are used to assign a role to a template section. The first two directives that we will cover are matHeaderCellDef and matCellDef.

The `matHeaderCellDef` and `matCellDef` Directives

Inside of each ng-container with a given column definition, there are a couple of configuration elements:

we have the template that defines how to display the header of a given column, identified via the matHeaderCellDef structural directive
we also have another template that defines how to display the data cells of a given column, using the matCellDef structural directive

These two structural directives only identify which template elements have a given role (cell template, header template), but they do not attach any styling to those elements.
For example, in this case, matCellDef and matHeaderCellDef are being applied to plain divs with no styling, so this is why this table does not have a Material design yet.

Applying a Material Design to the Data Table

Let's now see what it would take to give this Data Table a Material Look and Feel. For that, we will use a couple of built-in components in our header and cell template definitions:

      
        <mat-table class="lessons-table mat-elevation-z8" [dataSource]="dataSource">
      
        <ng-container matColumnDef="seqNo">
      
        <mat-header-cell *matHeaderCellDef>#</mat-header-cell>
      
        <mat-cell *matCellDef="let lesson">{{lesson.seqNo}}</mat-cell>
      
        </ng-container>
      
        <ng-container matColumnDef="description">
      
        <mat-header-cell *matHeaderCellDef>Description</mat-header-cell>
      
        <mat-cell class="description-cell"
      
        *matCellDef="let lesson">{{lesson.description}}</mat-cell>
      
        </ng-container>
      
        <ng-container matColumnDef="duration">
      
        <mat-header-cell *matHeaderCellDef>Duration</mat-header-cell>
      
        <mat-cell class="duration-cell"
      
        *matCellDef="let lesson">{{lesson.duration}}</mat-cell>
      
        </ng-container>
      
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      
        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
      
        </mat-table>

view raw 03.html hosted with ❤ by GitHub

This template is almost the same as the one we saw before, but now we are using the mat-header-cell and mat-cell components inside our column definition instead of plain divs.
Using these components, lets now have a look at what the Data Table looks like with this new Material Design:

Notice that the table already has some data! We will get to the data source in a moment, right now let's continue exploring the rest of the template.

The `matCellDef` Directive

The data cell template has access to the data that is being displayed. In this case, our data table is displaying a list of lessons, so the lesson object in each row is accessible via the let lesson syntax, and can be used in the template just like any component variable.

The `mat-header-row` component and the `matHeaderRowDef` directive

This combination of related component / directive works in the following way:

the matHeaderRowDef identifies a configuration element for the table header row, but it does not apply any styling to the element
The mat-header-row on the other hand applies some minimal Material stying

The matHeaderRowDef directive also defines in which order the columns should be displayed. In our case, the directive expression is pointing to a component variable named displayedColumns.
Here is what the displayedColumns component variable will look like:


	displayedColumns = ["seqNo", "description", "duration"];

view raw 04.ts hosted with ❤ by GitHub

The values of this array are the column keys, which need to be identical to the names of the ng-container column sections (specified via the matColumnDef directive).

Note: It's this array that determines the visual order of the columns!

The `mat-row` component and the `matRowDef` directive

This component / directive pair also works in a similar way to what we have seen in previous cases:

matRowDef identifies which element inside mat-table provides configuration for how a data row should look like, without providing any specific styling
on the other hand, mat-row will provide some Material stying to the data row

With mat-row, we also have a variable exported that we have named row, containing the data of a given data row, and we have to specify the columns property, which contains the order on which the data cells should be defined.

Interacting with a given table data row

We can even use the element identified by the matRowDef directive to interact with a given data row. For example, this is how we can detect if a given data row was clicked:

      
        <mat-row *matRowDef="let row; columns: displayedColumns" 
      
        (click)="onRowClicked(row)">
      
        </mat-row>

view raw 05.html hosted with ❤ by GitHub

When a row is clicked, we will call the onRowClicked() component method, that will then log the row data to the console:

      
        onRowClicked(row) {
      
        console.log('Row clicked: ', row);
      
        }

view raw 06.ts hosted with ❤ by GitHub

If we now click on the first row of our data table, here is what the result will look like on the console:

As we can see the data for the first row is being printed to the console, as expected! But where is this data coming from?
To answer that, let's then talk about the data source that is linked to this data table, and go over the Material Data Table reactive design.

Data Sources and the Data Table Reactive Design

The data table that we have been presenting receives the data that it displays from a Data Source that implements an Observable-based API and follows common reactive design principles.
This means for example that the data table component does not know where the data is coming from. The data could be coming for example from the backend, or from a client-side cache, but that is transparent to the Data table.
The Data table simply subscribes to an Observable provided by the Data Source. When that Observable emits a new value, it will contain a list of lessons that then get's displayed in the data table.

Data Table core design principles

With this Observable-based API, not only the Data table does not know where the data is coming from, but the data table also does not know what triggered the arrival of new data.
Here are some possible causes for the emission of new data:

the data table is initially displayed
the user clicks on a paginator button
the user sorts the data by clicking on a sortable header
the user types a search using an input box

Again, the Data Table has no information about exactly which event caused new data to arrive, which allows the Data Table components and directives to focus only on displaying the data, and not fetching it.
Let's then see how can we implement such a reactive data source.

Why not use `MatTableDataSource`?

In this example, we will not be using the built-in MatTableDataSource because its designed for filtering, sorting and pagination of a client-side data array.
In our case, all the filtering, sorting and pagination will be happening on the server, so we will be building our own Angular CDK reactive data source from first principles.

Fetching Data from the backend

In order to fetch data from the backend, our custom Data Source is going to be using the LessonsService. This is a standard Observable-based stateless singleton service that is built internally using the Angular HTTP Client.
Let's have a look at this service, and break down how its implemented:

      
        @Injectable()
      
        export class CoursesService {
      
        constructor(private http:HttpClient) {}
      
        findLessons(
      
        courseId:number, filter = '', sortOrder = 'asc',
      
        pageNumber = 0, pageSize = 3): Observable<Lesson[]> {
      
        return this.http.get('/api/lessons', {
      
        params: new HttpParams()
      
        .set('courseId', courseId.toString())
      
        .set('filter', filter)
      
        .set('sortOrder', sortOrder)
      
        .set('pageNumber', pageNumber.toString())
      
        .set('pageSize', pageSize.toString())
      
        }).pipe(
      
        map(res => res["payload"])
      
        );
      
        }
      
        }

view raw 07.ts hosted with ❤ by GitHub

Breaking down the `LessonsService` implementation

As we can see, this service is completely stateless, and every method forwards calls to the backend using the HTTP client, and returns an Observable to the caller.
Our REST API is available in URLs under the /api directory, and multiple services are available (here is the complete implementation).
In this snippet, we are just showing the findLessons() method, that allows to obtain one filtered and sorted page of lessons data for a given course.
Here are the arguments that we can pass to this function:

courseId: This identifies a given course, for which we want to retrieve a page of lessons
filter: This is a search string that will help us filter the results. If we pass the empty string '' it means that no filtering is done on the server
sortOrder: our backend allows us to sort based on the seqNo column, and with this parameter, we can specify is the sort order is ascending (which is the default asc value), or descending by passing the value desc
pageNumber: With the results filtered and sorted, we are going to specify which page of that full list of results we need. The default is to return the first page (with index 0)
pageSize: this specifies the page size, which defaults to a maximum of 3 elements

With this arguments, the loadLessons() method will then build an HTTP GET call to the backend endpoint available at /api/lessons.
Here is what an HTTP GET call that fetches the lessons for the first page looks like:

http://localhost:4200/api/lessons?courseId=1&filter=&sortOrder=asc&pageNumber=0&pageSize=3

As we can see, we are appending a series of HTTP query parameters to the GET URL using the HTTPParams fluent API.
This loadLessons() method will be the basis of our Data Source, as it will allow us to cover the server pagination, sorting and filtering use cases.

Implementing a Custom Angular CDK Data Source

Using the LessonsService, let's now implement a custom Observable-based Angular CDK Data Source. Here is some initial code, so that we can discuss its Reactive design (the full version is shown in a moment):

      
        import {CollectionViewer, DataSource} from "@angular/cdk/collections";
      
        export class LessonsDataSource implements DataSource<Lesson> {
      
        private lessonsSubject = new BehaviorSubject<Lesson[]>([]);
      
        constructor(private coursesService: CoursesService) {}
      
        connect(collectionViewer: CollectionViewer): Observable<Lesson[]> {
      
        ...
      
        }
      
        disconnect(collectionViewer: CollectionViewer): void {
      
        ...
      
        }
      
        loadLessons(courseId: number, filter: string,
      
        sortDirection: string, pageIndex: number, pageSize: number) {
      
        ...
      
        }
      
        }

view raw 08.ts hosted with ❤ by GitHub

Breaking down the design of an Angular CDK Data Source

Has we can see, in order to create a Data Source we need to create a class that implements DataSource. This means that this class needs to implement a couple of methods: connect() and disconnect().
Note that these methods provide an argument which is a CollectionViewer, which provides an Observable that emits information about what data is being displayed (the start index and the end index).
We would recommend for now not to focus so much on the CollectionViewer at this moment, but on something much more important for understanding the whole design: the return value of the connect() method.

How to implement the DataSource `connect()` method

This method will be called once by the Data Table at table bootstrap time. The Data Table expects this method to return an Observable, and the values of that observable contain the data that the Data Table needs to display.
In this case, this observable will emit a list of Lessons. As the user clicks on the paginator and changes to a new page, this observable will emit a new value with the new lessons page.
We will implement this method by using a subject that is going to be invisible outside this class. That subject (the lessonsSubject) is going to be emitting the values retrieved from the backend.
The lessonsSubject is a BehaviorSubject, which means its subscribers will always get its latest emitted value (or an initial value), even if they subscribed late (after the value was emitted).

Why use `BehaviorSubject`?

Using BehaviorSubject is a great way of writing code that works independently of the order that we use to perform asynchronous operations such as: calling the backend, binding the data table to the data source, etc.
For example, in this design, the Data Source is not aware of the data table or at which moment the Data Table will require the data. Because the data table subscribed to the connect() observable, it will eventually get the data, even if:

the data is still in transit coming from the HTTP backend
or if the data was already loaded

Custom Material CDK Data Source - Full Implementation Review

Now that we understand the reactive design of the data source, let's have a look at the complete final implementation and review it step-by-step.
Notice that in this final implementation, we have also included the notion of a loading flag, that we will use to display a spinning loading indicator to the user later on:

      
        export class LessonsDataSource implements DataSource<Lesson> {
      
        private lessonsSubject = new BehaviorSubject<Lesson[]>([]);
      
        private loadingSubject = new BehaviorSubject<boolean>(false);
      
        public loading$ = this.loadingSubject.asObservable();
      
        constructor(private coursesService: CoursesService) {}
      
        connect(collectionViewer: CollectionViewer): Observable<Lesson[]> {
      
        return this.lessonsSubject.asObservable();
      
        }
      
        disconnect(collectionViewer: CollectionViewer): void {
      
        this.lessonsSubject.complete();
      
        this.loadingSubject.complete();
      
        }
      
        loadLessons(courseId: number, filter = '',
      
        sortDirection = 'asc', pageIndex = 0, pageSize = 3) {
      
        this.loadingSubject.next(true);
      
        this.coursesService.findLessons(courseId, filter, sortDirection,
      
        pageIndex, pageSize).pipe(
      
        catchError(() => of([])),
      
        finalize(() => this.loadingSubject.next(false))
      
        )
      
        .subscribe(lessons => this.lessonsSubject.next(lessons));
      
        }
      
        }

view raw 09.ts hosted with ❤ by GitHub

Data Source Loading Indicator Implementation Breakdown

Let's start breaking down this code, we will start first with the implementation of the loading indicator. Because this Data Source class has a reactive design, let's implement the loading flag by exposing a boolean observable called loading$.
This observable will emit as first value false (which is defined in the BehaviorSubject constructor), meaning that no data is loading initially.
The loading$ observable is derived using asObservable() from a subject that is kept private to the data source class. The idea is that only this class knows when data is loading, so only this class can access the subject and emit new values for the loading flag.

The `connect()` method implementation

Let's now focus on the implementation of the connect method:

      
        connect(collectionViewer: CollectionViewer): Observable<Lesson[]> {
      
        return this.lessonsSubject.asObservable();
      
        }

view raw 20.ts hosted with ❤ by GitHub

This method will need to return an Observable that emits the lessons data, but we don't want to expose the internal subject lessonsSubject directly.
Exposing the subject would mean yielding control of when and what data gets emitted by the data source, and we want to avoid that. We want to ensure that only this class can emit values for the lessons data.
So we are also going to return an Observable derived from lessonsSubject using the asObservable() method. This gives the data table (or any other subscriber) the ability to subscribe to the lessons data observable, without being able to emit values for that same observable.

The `disconnect()` method implementation

Let's now break down the implementation of the disconnect method:

      
        disconnect(collectionViewer: CollectionViewer): void {
      
        this.lessonsSubject.complete();
      
        this.loadingSubject.complete();
      
        }

view raw 21.ts hosted with ❤ by GitHub

This method is called once by the data table at component destruction time. In this method, we are going to complete any observables that we have created internally in this class, in order to avoid memory leaks.
We are going to complete both the lessonsSubject and the loadingSubject, which are then going to trigger the completion of any derived observables.

The `loadLessons()` method implementation

Finally, let's now focus on the implementation of the loadLessons method:

      
        loadLessons(courseId: number, filter = '',
      
        sortDirection = 'asc', pageIndex = 0, pageSize = 3) {
      
        this.loadingSubject.next(true);
      
        this.coursesService.findLessons(courseId, filter, sortDirection,
      
        pageIndex, pageSize).pipe(
      
        catchError(() => of([])),
      
        finalize(() => this.loadingSubject.next(false))
      
        )
      
        .subscribe(lessons => this.lessonsSubject.next(lessons));
      
        }

view raw 22.ts hosted with ❤ by GitHub

The Data Source exposes this public method named loadLessons(). This method is going to be called in response to multiple user actions (pagination, sorting, filtering) to load a given data page.
Here is how this method works:

the first thing that we will do is to report that some data is being loaded, by emitting true to the loadingSubject, which will cause loading$ to also emit true
the LessonsService is going to be used to get a data page from the REST backend
a call to findLessons() is made, that returns an Observable
by subscribing to that observable, we trigger an HTTP request
if the data arrives successfully from the backend, we are going to emit it back to the data table, via the connect() Observable
for that, we will call next() on the lessonsSubject with the lessons data
the derived lessons observable returned by connect() will then emit the lessons data to the data table

Handling Backend Errors

Let's now see, still in the loadLessons() method, how the Data Source handles backend errors, and how the loading indicator is managed:

if an error in the HTTP request occurs, the Observable returned by findLessons() will error out
If that occurs, we are going to catch that error using catchError() and we are going to return an Observable that emits the empty array using of
we could complementary also use another MessagesService to show a closable error popup to the user
wether the call to the backend succeeds or fails, we will in both cases have the loading$ Observable emit false by using finalize() (which works like finally in plain Javascript try/catch/finally)

And with this last bit, we have completed the review of our custom Data Source!
This version of the data source will support all our use cases: pagination, sorting and filtering. As we can see, the design is all about providing data transparently to the Data Table using an Observable-based API.
Let's now see how we can take this Data Source and plug it into the Data Table.

Linking a Data Source with the Data Table

The Data Table will be displayed as part of the template of a component. Let's write an initial version of that component, that displays the first page of lessons:

      
        @Component({
      
        selector: 'course',
      
        templateUrl: './course.component.html',
      
        styleUrls: ['./course.component.css']
      
        })
      
        export class CourseComponent implements OnInit {
      
        dataSource: LessonsDataSource;
      
        displayedColumns= ["seqNo", "description", "duration"];
      
        constructor(private coursesService: CoursesService) {}
      
        ngOnInit() {
      
        this.dataSource = new LessonsDataSource(this.coursesService);
      
        this.dataSource.loadLessons(1);
      
        }
      
        }

view raw 10.ts hosted with ❤ by GitHub

This component contains a couple of properties:

the displayedColumns array defines the visual order of the columns
The dataSource property defines an instance of LessonsDataSource, and that is being passed to mat-table via the template

Breaking down the `ngOnInit` method

In the ngOnInit method, we are calling the Data Source loadLessons() method to trigger the loading of the first lessons page. Let's detail what happens as a result of that call:

The Data Source calls the LessonsService, which triggers an HTTP request to fetch the data
The Data Source then emits the data via the lessonsSubject, which causes the Observable returned by connect() to emit the lessons page
The mat-table Data Table component has subscribed to the connect() observable and retrieves the new lessons page
The Data Table then displays the new lessons page, without knowing where the data came from or what triggered its arrival

And with this "glue" component in place, we now have a working Data Table that displays server data!
The problem is that this initial example is always loading only the first page of data, with a page size of 3 and with no search criteria.
Let's use this example as a starting point, and starting adding: a loading indicator, pagination, sorting, and filtering.

Displaying a Material Loading Indicator

In order to display the loading indicator, we are going to be using the loading$ observable of the Data Source. We will be using the mat-spinner Material component:

      
        <div class="course">
      
        <div class="spinner-container" *ngIf="dataSource.loading$ | async">
      
        <mat-spinner></mat-spinner>
      
        </div>
      
        <mat-table class="lessons-table mat-elevation-z8" [dataSource]="dataSource">
      
        ....
      
        </mat-table>
      
        </div>

view raw 11.ts hosted with ❤ by GitHub

As we can see, we are using the async pipe and ngIf to show or hide the material loading indicator. Here is what the table looks like while the data is loading:

We will also be using the loading indicator when transitioning between two data pages using pagination, sorting or filtering.

Adding a Data Table Material Paginator

The Material Paginator component that we will be using is a generic paginator that comes with an Observable-based API. This paginator could be used to paginate anything, and it's not specifically linked to the Data Table.
For example, on a Master-Detail component setup, we could use this paginator to navigate between two detail elements.
This is how the mat-paginator component can be used in a template:

      
        <div class="course">
      
        <div class="spinner-container" *ngIf="dataSource.loading$ | async">
      
        <mat-spinner></mat-spinner>
      
        </div>
      
        <mat-table class="lessons-table mat-elevation-z8" [dataSource]="dataSource">
      
        ....
      
        </mat-table>
      
        <mat-paginator [length]="course?.lessonsCount" [pageSize]="3"
      
        [pageSizeOptions]="[3, 5, 10]"></mat-paginator>
      
        </div>

view raw 12.ts hosted with ❤ by GitHub

As we can see, there is nothing in the template linking the paginator with either the Data Source or the Data Table - that connection will be done at the level of the CourseComponent.
The paginator only needs to know how many total items are being paginated (via the length property), in order to know how many total pages there are!
Its based on that information (plus the current page index) that the paginator will enable or disable the navigation buttons.
In order to pass that information to the paginator, we are using the lessonsCount property of a new course object.

How to Link the Material Paginator to the Data Source

Let's now have a look at the CourseComponent, to see where course is coming from and how the paginator is linked to the Data Source:

      
        @Component({
      
        selector: 'course',
      
        templateUrl: './course.component.html',
      
        styleUrls: ['./course.component.css']
      
        })
      
        export class CourseComponent implements AfterViewInit, OnInit {
      
        course:Course;
      
        dataSource: LessonsDataSource;
      
        displayedColumns= ["seqNo", "description", "duration"];
      
        @ViewChild(MatPaginator) paginator: MatPaginator;
      
        constructor(private coursesService: CoursesService, private route: ActivatedRoute) {}
      
        ngOnInit() {
      
        this.course = this.route.snapshot.data["course"];
      
        this.dataSource = new LessonsDataSource(this.coursesService);
      
        this.dataSource.loadLessons(this.course.id, '', 'asc', 0, 3);
      
        }
      
        ngAfterViewInit() {
      
        this.paginator.page
      
        .pipe(
      
        tap(() => this.loadLessonsPage())
      
        )
      
        .subscribe();
      
        }
      
        loadLessonsPage() {
      
        this.dataSource.loadLessons(
      
        this.course.id,
      
        '',
      
        'asc',
      
        this.paginator.pageIndex,
      
        this.paginator.pageSize);
      
        }
      
        }

view raw 14.ts hosted with ❤ by GitHub

Breaking down the `ngOnInit()` method

Let's start with the course object: as we can see this object is available at component construction time via the router.
This data object was retrieved from the backend at router navigation time using a router Data Resolver (see an example here).
This is a very common design, that ensures that the target navigation screen already has some pre-fetched data ready to display.
We are also loading the first page of data directly in this method (on line 20).

How is the Paginator linked to the Data Source?

We can see in the code above that the link between the paginator and the Data Source is done in the ngAfterViewInit() method, so let's break it down:

      
        ngAfterViewInit() {
      
        this.paginator.page
      
        .pipe(
      
        tap(() => this.loadLessonsPage())
      
        )
      
        .subscribe();
      
        }

view raw 23.ts hosted with ❤ by GitHub

We are using the AfterViewInit lifecycle hook because we need to make sure that the paginator component queried via @ViewChild is already available.
The paginator also has an Observable-based API, and it exposes a page Observable. This observable will emit a new value every time that the user clicks on the paginator navigation buttons or the page size dropdown.
So in order to load new pages in response to a pagination event, all we have to do is to subscribe to this observable, and in response to a pagination event, we are going to make a call to the Data Source loadLessons() method, by calling loadLessonsPage().
In that call to loadLessons(), we are going to pass to the Data Source what page index we would like to load, and what page size, and that information is taken directly from the paginator.

Why have we used the `tap()` operator?

We could also have done the call to the data source from inside a subscribe() handler, but in this case, we have implemented that call using the pipeable version of the RxJs do operator called tap.

View the Paginator in Action

And with this in place, we now have a working Material Paginator! Here is what the Material Paginator looks like on the screen, while displaying page 2 of the lessons list:

Let's now continue to add more features to our example, let's add another very commonly needed feature: sortable table headers.

Adding Sortable Material Headers

In order to add sortable headers to our Data Table, we will need to annotate it with the matSort directive. In this case, we will make only one column in the table sortable, the seqNo column.
Here is what the template with all the multiple sort-related directives looks like:

      
        <mat-table class="lessons-table mat-elevation-z8" [dataSource]="dataSource"
      
        matSort matSortActive="seqNo" matSortDirection="asc" matSortDisableClear>
      
        <ng-container matColumnDef="seqNo">
      
        <mat-header-cell *matHeaderCellDef mat-sort-header>#</mat-header-cell>
      
        <mat-cell *matCellDef="let lesson">{{lesson.seqNo}}</mat-cell>
      
        </ng-container>
      
        ....
      
        </mat-table>

view raw 15.html hosted with ❤ by GitHub

Besides the matSort directive, we are also adding a couple of extra auxiliary sort-related directives to the mat-table component:

matSortActive: When the data is passed to the Data Table, its usually already sorted. This directive allows us to inform the Data Table that the data is already initally sorted by the seqNo column, so the seqNo column sorting icon will be displayed as an upwards arrow
matSortDirection: This is a companion directive to matSortActive, it specifies the direction of the initial sort. In this case, the data is initially sorted by the seqNo column in ascending order, and so the column header will adapt the sorting icon accordingly (screenshot below)
matSortDisableClear: Sometimes, besides ascending and descending order we might want a third "unsorted" state for the sortable column header, where we can clear the sorting order. In this case, we want to disable that to make sure the seqNo column always shown either the ascending or descending states

This is the sort configuration for the whole data table, but we also need to identify exactly what table headers are sortable!
In our case, only the seqNo column is sortable, so we are annotating the column header cell with the mat-sort-header directive.
And this covers the template changes, let's now have a look at the changes we made to the CourseComponent in order to enable table header sorting.

Linking the Sortable column header to the Data Source

Just like the case of pagination, the sortable header will expose an Observable that emits values whenever the user clicks on the sortable column header.
The MatSort directive then exposes a sort Observable, that can trigger a new page load in the following way:

      
        @Component({
      
        selector: 'course',
      
        templateUrl: './course.component.html',
      
        styleUrls: ['./course.component.css']
      
        })
      
        export class CourseComponent implements AfterViewInit, OnInit {
      
        course:Course;
      
        dataSource: LessonsDataSource;
      
        displayedColumns= ["seqNo", "description", "duration"];
      
        @ViewChild(MatPaginator) paginator: MatPaginator;
      
        @ViewChild(MatSort) sort: MatSort;
      
        constructor(private coursesService: CoursesService, private route: ActivatedRoute) {}
      
        ngOnInit() {
      
        this.course = this.route.snapshot.data["course"];
      
        this.dataSource = new LessonsDataSource(this.coursesService);
      
        this.dataSource.loadLessons(this.course.id, '', 'asc', 0, 3);
      
        }
      
        ngAfterViewInit() {
      
        // reset the paginator after sorting
      
         this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
      
        merge(this.sort.sortChange, this.paginator.page)
      
        .pipe(
      
        tap(() => this.loadLessonsPage())
      
        )
      
        .subscribe();
      
        }
      
        loadLessonsPage() {
      
        this.dataSource.loadLessons(
      
        this.course.id, '', this.sort.direction,
      
        this.paginator.pageIndex, this.paginator.pageSize);
      
        }
      
        }

view raw 16.ts hosted with ❤ by GitHub

As we can see, the sort Observable is now being merged with the page observable! Now a new page load will be triggered in two cases:

when a pagination event occurs
when a sort event occurs

The sort direction of the seqNo column is now taken from the sort directive (injected via @ViewChild()) to the backend.
Notice that after each sort we are also resetting the paginator, by forcing the first page of the sorted data to be displayed.

The Material Sort Header In Action

Here is what the Data Table with sortable headers looks like, after loading the data and clicking the sortable header (triggering a descending sort by seqNo):

Notice the sort icon on the seqNo column

At this point, we have server pagination and sorting in place. We are now ready to add the final major feature: server-side filtering.

Adding Server-Side Filtering

In order to implement server-side filtering, the first thing that we need to do is to add a search box to our template.
And because this is the final version, let's then display the complete template with all its features: pagination, sorting and also server-side filtering:

      
        <div class="course">
      
        <!-- New part: this is the search box -->
      
        <mat-input-container>
      
        <input matInput placeholder="Search lessons" #input>
      
        </mat-input-container>
      
        <div class="spinner-container" *ngIf="dataSource.loading$ | async">
      
        <mat-spinner></mat-spinner>
      
        </div>
      
        <mat-table class="lessons-table mat-elevation-z8" [dataSource]="dataSource"
      
        matSort matSortActive="seqNo" matSortDirection="asc" matSortDisableClear>
      
        <ng-container matColumnDef="seqNo">
      
        <mat-header-cell *matHeaderCellDef mat-sort-header>#</mat-header-cell>
      
        <mat-cell *matCellDef="let lesson">{{lesson.seqNo}}</mat-cell>
      
        </ng-container>
      
        <ng-container matColumnDef="description">
      
        <mat-header-cell *matHeaderCellDef>Description</mat-header-cell>
      
        <mat-cell class="description-cell"
      
        *matCellDef="let lesson">{{lesson.description}}</mat-cell>
      
        </ng-container>
      
        <ng-container matColumnDef="duration">
      
        <mat-header-cell *matHeaderCellDef>Duration</mat-header-cell>
      
        <mat-cell class="duration-cell"
      
        *matCellDef="let lesson">{{lesson.duration}}</mat-cell>
      
        </ng-container>
      
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      
        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
      
        </mat-table>
      
        <mat-paginator [length]="course?.lessonsCount" [pageSize]="3"
      
        [pageSizeOptions]="[3, 5, 10]"></mat-paginator>
      
        </div>

view raw 17.html hosted with ❤ by GitHub

Breaking down the Search Box implementation

As we can see, the only new part in this final template version is the mat-input-container, containing the Material Input box where the user types the search query.
This input box follows a common pattern found in the Material library: The mat-input-container is wrapping a plain HTML input and projecting it.
This gives us full access to all standard input properties including for example all the Accessibility-related properties. This also gives us compatibility with Angular Forms, as we can apply Form directives directly in the input HTML element.
Read more about how to build a similar component in this post: Angular ng-content and Content Projection: The Complete Guide.
Notice that there is not even an event handler attached to this input box ! Let's then have a look at the component and see how this works.

Final Component with Server Pagination, Sorting and Filtering

This is the final version of CourseComponent with all features included:

      
        @Component({
      
        selector: 'course',
      
        templateUrl: './course.component.html',
      
        styleUrls: ['./course.component.css']
      
        })
      
        export class CourseComponent implements OnInit, AfterViewInit {
      
        course:Course;
      
        dataSource: LessonsDataSource;
      
        displayedColumns= ["seqNo", "description", "duration"];
      
        @ViewChild(MatPaginator) paginator: MatPaginator;
      
        @ViewChild(MatSort) sort: MatSort;
      
        @ViewChild('input') input: ElementRef;
      
        constructor(
      
        private route: ActivatedRoute,
      
        private coursesService: CoursesService) {}
      
        ngOnInit() {
      
        this.course = this.route.snapshot.data["course"];
      
        this.dataSource = new LessonsDataSource(this.coursesService);
      
        this.dataSource.loadLessons(this.course.id, '', 'asc', 0, 3);
      
        }
      
        ngAfterViewInit() {
      
        // server-side search
      
         fromEvent(this.input.nativeElement,'keyup')
      
        .pipe(
      
        debounceTime(150),
      
        distinctUntilChanged(),
      
        tap(() => {
      
        this.paginator.pageIndex = 0;
      
        this.loadLessonsPage();
      
        })
      
        )
      
        .subscribe();
      
        // reset the paginator after sorting
      
         this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
      
        // on sort or paginate events, load a new page
      
         merge(this.sort.sortChange, this.paginator.page)
      
        .pipe(
      
        tap(() => this.loadLessonsPage())
      
        )
      
        .subscribe();
      
        }
      
        loadLessonsPage() {
      
        this.dataSource.loadLessons(
      
        this.course.id,
      
        this.input.nativeElement.value,
      
        this.sort.direction,
      
        this.paginator.pageIndex,
      
        this.paginator.pageSize);
      
        }
      
        }

view raw 18.ts hosted with ❤ by GitHub

Let's then focus on breaking down the server filtering part.

Getting a reference to the Search Input Box

We can see that we have injected a DOM reference to the <input> element using @ViewChild('input'). Notice that this time around, the injection mechanism gave us a reference to a DOM element and not to a component.
With that DOM reference, here is the part that triggers a server-side search when the user types in a new query:

      
        // server-side search
      
        fromEvent(this.input.nativeElement,'keyup')
      
        .pipe(
      
        debounceTime(150),
      
        distinctUntilChanged(),
      
        tap(() => {
      
        this.paginator.pageIndex = 0;
      
        this.loadLessonsPage();
      
        })
      
        )
      
        .subscribe();

view raw 19.ts hosted with ❤ by GitHub

What we are doing in this is snippet is: we are taking the search input box and we are creating an Observable using fromEvent.
This Observable will emit a value every time that a new keyUp event occurs. To this Observable we will then apply a couple of operators:

debounceTime(150): The user can type quite quickly in the input box, and that could trigger a lot of server requests. With this operator, we are limiting the amount of server requests emitted to a maximum of one every 150ms.
distinctUntilChanged(): This operator will eliminate duplicate values

And with these two operators in place, we can now trigger a page load by passing the query string, the page size and page index to the the Data Source via the tap() operator.
Let's now have a look at the what the screen would look like if the user types the search term "hello":

And with this in place, we have completed our example! We now have a complete solution for how to implement an Angular Material Data Table with server-side pagination, sorting and filtering.
Let's now quickly summarize what we have learned.

Conclusions

The Data Table, the Data Source and related components are a good example of a reactive design that uses an Observable-based API. Let's highlight the key points of the design:

the Material Data Table expects to receive the data from the Data Source via an Observable
The Data Source main role is to build and provide an Observable that emits new versions of the tabular data to the Data Table
A component class like CourseService will then "glue" everything together

This reactive design helps to ensure the loose coupling of the multiple elements involved, and provides a strong separation of concerns.

Source Code + Github Running Example

A running example of the complete code is available here on this branch on Github, and it includes a small backend Express server that serves the data and does the server-side sorting/pagination/filtering.
I hope that this post helps with getting started with the Angular Material Data Table and that you enjoyed it!

If you have some questions or comments please let me know in the comments below and I will get back to you.

To get notified of upcoming posts on Angular Material and other Angular topics, I invite you to subscribe to our newsletter:

Video Lessons Available on YouTube

Have a look at the Angular University Youtube channel, we publish about 25% to a third of our video tutorials there, new videos are published all the time.

Subscribe to get new video tutorials:

Spring Data JPA using Hibernate and Java Configuration with Annotations

2017-10-08T22:50:00.000-04:00

In this tutorial I’ll show you how to use Spring Data JPA to integrate a relational database (PostgreSQL in my example) into a Spring Boot application.
I’ll use these technologies and tools:

Spring Tool Suite (STS) 3.8.4.RELEASE
Java 8
Spring Boot 1.5.3.RELEASE
Maven 3.3.9
PostgreSQL 9.6.2

1. The Project Structure

The final folder structure of our project.

2. Create a new Spring Boot project

If you’re using STS, you can easily create a starter project by either selecting File > New > Spring Starter Project from the main menu or right-clicking on the Package Explorer and select New > Spring Starter Project.

In case you’re using another IDE like Eclipse, Netbeans or IntelliJ IDEA, you can create a new Maven project and add to the pom.xml file the dependencies listed in the next paragraph.

3. Maven Dependencies

spring-boot-starter-data-jpa is the fundamental dependency for our project, then we need the driver for whatever SQL database we have chosen, in this case postgresql.

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.thomasvitale</groupId>
<artifactId>Application</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>
<name>Application</name>
<description>Demo application for Spring Data JPA</description>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>1.5.3.RELEASE</version>
<relativePath/>
</parent>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.postgresql</groupId>
<artifactId>postgresql</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.thomasvitale</groupId>
  <artifactId>Application</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>jar</packaging>

  <name>Application</name>
  <description>Demo application for Spring Data JPA</description>

  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>1.5.3.RELEASE</version>
    <relativePath/> <!-- lookup parent from repository -->
  </parent>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    <java.version>1.8</java.version>
  </properties>

  <dependencies>
  
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>

    <dependency>
      <groupId>org.postgresql</groupId>
      <artifactId>postgresql</artifactId>
      <scope>runtime</scope>
    </dependency>
  
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-test</artifactId>
      <scope>test</scope>
    </dependency>
    
  </dependencies>

  <build>
    <plugins>
      <plugin>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-maven-plugin</artifactId>
      </plugin>
    </plugins>
  </build>

</project>

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.thomasvitale</groupId>
  <artifactId>Application</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>jar</packaging>

  <name>Application</name>
  <description>Demo application for Spring Data JPA</description>

  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>1.5.3.RELEASE</version>
    <relativePath/> <!-- lookup parent from repository -->
  </parent>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    <java.version>1.8</java.version>
  </properties>

  <dependencies>
  
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>

    <dependency>
      <groupId>org.postgresql</groupId>
      <artifactId>postgresql</artifactId>
      <scope>runtime</scope>
    </dependency>
  
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-test</artifactId>
      <scope>test</scope>
    </dependency>
    
  </dependencies>

  <build>
    <plugins>
      <plugin>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-maven-plugin</artifactId>
      </plugin>
    </plugins>
  </build>

</project>

I’m using PostgreSQL, but this example works fine also with other relational databases. For example, if you want to use MySQL, all you need to do is replace the postgresql dependency with the mysql one.

<dependency>
  <groupId>mysql</groupId>
  <artifactId>mysql-connector-java</artifactId>
  <scope>runtime</scope>
</dependency>

<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>

<dependency>
  <groupId>mysql</groupId>
  <artifactId>mysql-connector-java</artifactId>
  <scope>runtime</scope>
</dependency>

4. Spring Configuration using Java Annotations and Hibernate

Spring lets you use either Java configuration or XML configuration or a mix of the two. I’ll use a pure Java configuration. There are a few implementations of JPA, in this example Hibernate is used. Its properties are stored in a dedicated file.

JpaConfig.java

package com.thomasvitale;
import java.util.Properties;
import javax.persistence.EntityManagerFactory;
import javax.sql.DataSource;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.PropertySource;
import org.springframework.core.env.Environment;
import org.springframework.dao.annotation.PersistenceExceptionTranslationPostProcessor;
import org.springframework.data.jpa.repository.config.EnableJpaRepositories;
import org.springframework.jdbc.datasource.DriverManagerDataSource;
import org.springframework.orm.jpa.JpaTransactionManager;
import org.springframework.orm.jpa.LocalContainerEntityManagerFactoryBean;
import org.springframework.orm.jpa.vendor.Database;
import org.springframework.orm.jpa.vendor.HibernateJpaVendorAdapter;
import org.springframework.transaction.PlatformTransactionManager;
import org.springframework.transaction.annotation.EnableTransactionManagement;
@Configuration
@EnableTransactionManagement
@EnableJpaRepositories(basePackages = "com.thomasvitale.repository")
@PropertySource("classpath:jpa.properties")
public class JpaConfig {
@Autowired
private Environment env;
@Bean
public LocalContainerEntityManagerFactoryBean entityManagerFactory() {
HibernateJpaVendorAdapter vendorAdapter = new HibernateJpaVendorAdapter();
vendorAdapter.setDatabase(Database.POSTGRESQL);
vendorAdapter.setGenerateDdl(true);
LocalContainerEntityManagerFactoryBean em = new LocalContainerEntityManagerFactoryBean();
em.setDataSource(dataSource());
em.setPackagesToScan("com.thomasvitale.model");
em.setJpaVendorAdapter(vendorAdapter);
em.setJpaProperties(additionalProperties());
return em;
}
@Bean
public DataSource dataSource(){
DriverManagerDataSource dataSource = new DriverManagerDataSource();
dataSource.setDriverClassName(env.getProperty("hibernate.connection.driver_class"));
dataSource.setUrl(env.getProperty("hibernate.connection.url"));
dataSource.setUsername(env.getProperty("hibernate.connection.username"));
dataSource.setPassword(env.getProperty("hibernate.connection.password"));
return dataSource;
}
@Bean
public PlatformTransactionManager transactionManager(EntityManagerFactory emf){
JpaTransactionManager transactionManager = new JpaTransactionManager();
transactionManager.setEntityManagerFactory(emf);
return transactionManager;
}
@Bean
public PersistenceExceptionTranslationPostProcessor exceptionTranslation(){
return new PersistenceExceptionTranslationPostProcessor();
}
Properties additionalProperties() {
Properties properties = new Properties();
properties.setProperty("hibernate.hbm2ddl.auto", env.getProperty("hibernate.hbm2ddl.auto"));
properties.setProperty("hibernate.dialect", env.getProperty("hibernate.dialect"));
properties.setProperty("hibernate.current_session_context_class", env.getProperty("hibernate.current_session_context_class"));
return properties;
}
}

package com.thomasvitale;

import java.util.Properties;

import javax.persistence.EntityManagerFactory;
import javax.sql.DataSource;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.PropertySource;
import org.springframework.core.env.Environment;
import org.springframework.dao.annotation.PersistenceExceptionTranslationPostProcessor;
import org.springframework.data.jpa.repository.config.EnableJpaRepositories;
import org.springframework.jdbc.datasource.DriverManagerDataSource;
import org.springframework.orm.jpa.JpaTransactionManager;
import org.springframework.orm.jpa.LocalContainerEntityManagerFactoryBean;
import org.springframework.orm.jpa.vendor.Database;
import org.springframework.orm.jpa.vendor.HibernateJpaVendorAdapter;
import org.springframework.transaction.PlatformTransactionManager;
import org.springframework.transaction.annotation.EnableTransactionManagement;

@Configuration
@EnableTransactionManagement 
@EnableJpaRepositories(basePackages = "com.thomasvitale.repository")
@PropertySource("classpath:jpa.properties")
public class JpaConfig {
  
  @Autowired
  private Environment env;

  @Bean
  public LocalContainerEntityManagerFactoryBean entityManagerFactory() {
    
    HibernateJpaVendorAdapter vendorAdapter = new HibernateJpaVendorAdapter();
    vendorAdapter.setDatabase(Database.POSTGRESQL);
    vendorAdapter.setGenerateDdl(true);
    
    LocalContainerEntityManagerFactoryBean em = new LocalContainerEntityManagerFactoryBean();
    em.setDataSource(dataSource());
    em.setPackagesToScan("com.thomasvitale.model");
    em.setJpaVendorAdapter(vendorAdapter);
    em.setJpaProperties(additionalProperties());
 
    return em;
  }
  
  @Bean
  public DataSource dataSource(){
    DriverManagerDataSource dataSource = new DriverManagerDataSource();
    dataSource.setDriverClassName(env.getProperty("hibernate.connection.driver_class"));
    dataSource.setUrl(env.getProperty("hibernate.connection.url"));
    dataSource.setUsername(env.getProperty("hibernate.connection.username"));
    dataSource.setPassword(env.getProperty("hibernate.connection.password"));
    return dataSource;
  }
  
  @Bean
  public PlatformTransactionManager transactionManager(EntityManagerFactory emf){
    JpaTransactionManager transactionManager = new JpaTransactionManager();
    transactionManager.setEntityManagerFactory(emf);
  
    return transactionManager;
  }
  
  @Bean
  public PersistenceExceptionTranslationPostProcessor exceptionTranslation(){
    return new PersistenceExceptionTranslationPostProcessor();
  }

  Properties additionalProperties() {
    Properties properties = new Properties();
    properties.setProperty("hibernate.hbm2ddl.auto", env.getProperty("hibernate.hbm2ddl.auto"));
    properties.setProperty("hibernate.dialect", env.getProperty("hibernate.dialect"));
    properties.setProperty("hibernate.current_session_context_class", env.getProperty("hibernate.current_session_context_class"));
    return properties;
  }

}

package com.thomasvitale;

import java.util.Properties;

import javax.persistence.EntityManagerFactory;
import javax.sql.DataSource;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.PropertySource;
import org.springframework.core.env.Environment;
import org.springframework.dao.annotation.PersistenceExceptionTranslationPostProcessor;
import org.springframework.data.jpa.repository.config.EnableJpaRepositories;
import org.springframework.jdbc.datasource.DriverManagerDataSource;
import org.springframework.orm.jpa.JpaTransactionManager;
import org.springframework.orm.jpa.LocalContainerEntityManagerFactoryBean;
import org.springframework.orm.jpa.vendor.Database;
import org.springframework.orm.jpa.vendor.HibernateJpaVendorAdapter;
import org.springframework.transaction.PlatformTransactionManager;
import org.springframework.transaction.annotation.EnableTransactionManagement;

@Configuration
@EnableTransactionManagement 
@EnableJpaRepositories(basePackages = "com.thomasvitale.repository")
@PropertySource("classpath:jpa.properties")
public class JpaConfig {
  
  @Autowired
  private Environment env;

  @Bean
  public LocalContainerEntityManagerFactoryBean entityManagerFactory() {
    
    HibernateJpaVendorAdapter vendorAdapter = new HibernateJpaVendorAdapter();
    vendorAdapter.setDatabase(Database.POSTGRESQL);
    vendorAdapter.setGenerateDdl(true);
    
    LocalContainerEntityManagerFactoryBean em = new LocalContainerEntityManagerFactoryBean();
    em.setDataSource(dataSource());
    em.setPackagesToScan("com.thomasvitale.model");
    em.setJpaVendorAdapter(vendorAdapter);
    em.setJpaProperties(additionalProperties());
 
    return em;
  }
  
  @Bean
  public DataSource dataSource(){
    DriverManagerDataSource dataSource = new DriverManagerDataSource();
    dataSource.setDriverClassName(env.getProperty("hibernate.connection.driver_class"));
    dataSource.setUrl(env.getProperty("hibernate.connection.url"));
    dataSource.setUsername(env.getProperty("hibernate.connection.username"));
    dataSource.setPassword(env.getProperty("hibernate.connection.password"));
    return dataSource;
  }
  
  @Bean
  public PlatformTransactionManager transactionManager(EntityManagerFactory emf){
    JpaTransactionManager transactionManager = new JpaTransactionManager();
    transactionManager.setEntityManagerFactory(emf);
  
    return transactionManager;
  }
  
  @Bean
  public PersistenceExceptionTranslationPostProcessor exceptionTranslation(){
    return new PersistenceExceptionTranslationPostProcessor();
  }

  Properties additionalProperties() {
    Properties properties = new Properties();
    properties.setProperty("hibernate.hbm2ddl.auto", env.getProperty("hibernate.hbm2ddl.auto"));
    properties.setProperty("hibernate.dialect", env.getProperty("hibernate.dialect"));
    properties.setProperty("hibernate.current_session_context_class", env.getProperty("hibernate.current_session_context_class"));
    return properties;
  }

}

jpa.properties

hibernate.connection.username=db-user
hibernate.connection.password=db-password
hibernate.connection.url=jdbc:postgresql://localhost:5432/app
hibernate.connection.driver_class=org.postgresql.Driver
hibernate.dialect=org.hibernate.dialect.PostgreSQLDialect
hibernate.current_session_context_class=thread
hibernate.hbm2ddl.auto=validate
hibernate.show_sql=false
hibernate.format_sql=false

hibernate.connection.username=db-user
hibernate.connection.password=db-password
hibernate.connection.url=jdbc:postgresql://localhost:5432/app
hibernate.connection.driver_class=org.postgresql.Driver
hibernate.dialect=org.hibernate.dialect.PostgreSQLDialect
hibernate.current_session_context_class=thread
hibernate.hbm2ddl.auto=validate
hibernate.show_sql=false
hibernate.format_sql=false

hibernate.connection.username=db-user
hibernate.connection.password=db-password
hibernate.connection.url=jdbc:postgresql://localhost:5432/app
hibernate.connection.driver_class=org.postgresql.Driver
hibernate.dialect=org.hibernate.dialect.PostgreSQLDialect
hibernate.current_session_context_class=thread
hibernate.hbm2ddl.auto=validate
hibernate.show_sql=false
hibernate.format_sql=false

If you’re using MySQL, pay attention to replace line 36 of JpaConfig.java with this one: vendorAdapter.setDatabase(Database.MYSQL); and change the relative values in the jpa.properties file:

hibernate.connection.url=jdbc:mysql://localhost:3306/app
hibernate.connection.driver_class=com.mysql.jdbc.Driver
hibernate.dialect=org.hibernate.dialect.MySQLDialect

hibernate.connection.url=jdbc:mysql://localhost:3306/app
hibernate.connection.driver_class=com.mysql.jdbc.Driver
hibernate.dialect=org.hibernate.dialect.MySQLDialect

hibernate.connection.url=jdbc:mysql://localhost:3306/app
hibernate.connection.driver_class=com.mysql.jdbc.Driver
hibernate.dialect=org.hibernate.dialect.MySQLDialect

5. Person Model

For the Person entity, first of all I create a new table (persons) in my PostgreSQL database (called app).

CREATE TABLE persons(
  id SERIAL,
  firstName VARCHAR(32),
  lastName VARCHAR(32),
  PRIMARY KEY(id)
);

CREATE TABLE persons(
id SERIAL,
firstName VARCHAR(32),
lastName VARCHAR(32),
PRIMARY KEY(id)
);

CREATE TABLE persons(
  id SERIAL,
  firstName VARCHAR(32),
  lastName VARCHAR(32),
  PRIMARY KEY(id)
);

Then I code the mapping object model. The @Table(name = "persons") annotation specifies in which table to save a Person object. The @GeneratedValue(strategy = GenerationType.IDENTITY) is quite general. In PostgreSQL I have defined the id attribute as SERIAL. In MySQL you probably want to use AUTO_INCREMENT. That’s just fine, it works with both of them.

Person.java

package com.thomasvitale.model;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
@Entity
@Table(name = "persons")
public class Person {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Integer id;
private String firstName;
private String lastName;
public Person() {
}
public Person(String firstName, String lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getFirstName() {
return firstName;
}
public void setFirstName(String firstName) {
this.firstName = firstName;
}
public String getLastName() {
return lastName;
}
public void setLastName(String lastName) {
this.lastName = lastName;
}
@Override
public String toString() {
return firstName + " " + lastName;
}
}

package com.thomasvitale.model;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;

@Entity
@Table(name = "persons")
public class Person {

  @Id
  @GeneratedValue(strategy = GenerationType.IDENTITY)
  private Integer id;
  
  private String firstName;
  private String lastName;

  public Person() {
  }

  public Person(String firstName, String lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  public Integer getId() {
    return id;
  }

  public void setId(Integer id) {
    this.id = id;
  }

  public String getFirstName() {
    return firstName;
  }

  public void setFirstName(String firstName) {
    this.firstName = firstName;
  }

  public String getLastName() {
    return lastName;
  }

  public void setLastName(String lastName) {
    this.lastName = lastName;
  }

  @Override
  public String toString() {
    return firstName + " " + lastName;
  }
}

package com.thomasvitale.model;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;

@Entity
@Table(name = "persons")
public class Person {

  @Id
  @GeneratedValue(strategy = GenerationType.IDENTITY)
  private Integer id;
  
  private String firstName;
  private String lastName;

  public Person() {
  }

  public Person(String firstName, String lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  public Integer getId() {
    return id;
  }

  public void setId(Integer id) {
    this.id = id;
  }

  public String getFirstName() {
    return firstName;
  }

  public void setFirstName(String firstName) {
    this.firstName = firstName;
  }

  public String getLastName() {
    return lastName;
  }

  public void setLastName(String lastName) {
    this.lastName = lastName;
  }

  @Override
  public String toString() {
    return firstName + " " + lastName;
  }
}

6. Person Repository

Our PersonRepository extends the JpaRepository interface, that provides us with a lot of operations out-of-the-box, including the standard CRUD operations. You can also add custom operations like findByFirstName and findByLastName without writing any implementation: Spring Data JPA creates them for you!

PersonRepository.java

package com.thomasvitale.repository;
import java.util.List;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import com.thomasvitale.model.Person;
@Repository
public interface PersonRepository extends JpaRepository<Person, Integer> {
public Person findByFirstName(String firstName);
public List<Person> findByLastName(String lastName);
}

package com.thomasvitale.repository;

import java.util.List;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

import com.thomasvitale.model.Person;

@Repository
public interface PersonRepository extends JpaRepository<Person, Integer> {
  
  public Person findByFirstName(String firstName);
  public List<Person> findByLastName(String lastName);
  
}

package com.thomasvitale.repository;

import java.util.List;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

import com.thomasvitale.model.Person;

@Repository
public interface PersonRepository extends JpaRepository<Person, Integer> {
  
  public Person findByFirstName(String firstName);
  public List<Person> findByLastName(String lastName);
  
}

7. Demo

Let’s try some CRUD operations to test our application.

package com.thomasvitale;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.CommandLineRunner;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

import com.thomasvitale.model.Person;
import com.thomasvitale.repository.PersonRepository;

@SpringBootApplication
public class Application implements CommandLineRunner {
  
  @Autowired
  PersonRepository personRepository;

  public static void main(String[] args) {
    SpringApplication.run(Application.class, args);
  }

  @Override
  public void run(String... arg0) throws Exception {
    
      // Save three Person documents on PostgreSQL
      personRepository.save(new Person("Sheldon", "Cooper"));
      personRepository.save(new Person("Missy", "Cooper"));
      personRepository.save(new Person("Leonard", "Hofstadter"));
      
      // Get all the people
      System.out.println(">>> All the people in the database:");
      personRepository.findAll().forEach(System.out::println);
      
      // Get all the people with a specific last name
      System.out.println(">>> All people with last name = 'Cooper'");
      personRepository.findByLastName("Cooper").forEach(System.out::println);
      
      // Update an individual person
      Person person = personRepository.findByFirstName("Sheldon");
      person.setFirstName("Shelly");
      personRepository.save(person);
      
      // Delete all 
      personRepository.deleteAll();
    
  }
}

package com.thomasvitale;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.CommandLineRunner;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import com.thomasvitale.model.Person;
import com.thomasvitale.repository.PersonRepository;
@SpringBootApplication
public class Application implements CommandLineRunner {
@Autowired
PersonRepository personRepository;
public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}
@Override
public void run(String... arg0) throws Exception {
// Save three Person documents on PostgreSQL
personRepository.save(new Person("Sheldon", "Cooper"));
personRepository.save(new Person("Missy", "Cooper"));
personRepository.save(new Person("Leonard", "Hofstadter"));
// Get all the people
System.out.println(">>> All the people in the database:");
personRepository.findAll().forEach(System.out::println);
// Get all the people with a specific last name
System.out.println(">>> All people with last name = 'Cooper'");
personRepository.findByLastName("Cooper").forEach(System.out::println);
// Update an individual person
Person person = personRepository.findByFirstName("Sheldon");
person.setFirstName("Shelly");
personRepository.save(person);
// Delete all
personRepository.deleteAll();
}
}

package com.thomasvitale;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.CommandLineRunner;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

import com.thomasvitale.model.Person;
import com.thomasvitale.repository.PersonRepository;

@SpringBootApplication
public class Application implements CommandLineRunner {
  
  @Autowired
  PersonRepository personRepository;

  public static void main(String[] args) {
    SpringApplication.run(Application.class, args);
  }

  @Override
  public void run(String... arg0) throws Exception {
    
      // Save three Person documents on PostgreSQL
      personRepository.save(new Person("Sheldon", "Cooper"));
      personRepository.save(new Person("Missy", "Cooper"));
      personRepository.save(new Person("Leonard", "Hofstadter"));
      
      // Get all the people
      System.out.println(">>> All the people in the database:");
      personRepository.findAll().forEach(System.out::println);
      
      // Get all the people with a specific last name
      System.out.println(">>> All people with last name = 'Cooper'");
      personRepository.findByLastName("Cooper").forEach(System.out::println);
      
      // Update an individual person
      Person person = personRepository.findByFirstName("Sheldon");
      person.setFirstName("Shelly");
      personRepository.save(person);
      
      // Delete all 
      personRepository.deleteAll();
    
  }
}

Resources

Facebook Twitter LinkedIn Google+Pinterest Share

Wildfly – Install PostgreSQL JDBC Driver as a Module

2017-09-10T18:02:00.000-04:00

Instead of deploying a JDBC driver with the wildfly auto-deploy feature, the driver can be alternatively installed as an module. This is also necessary to be used with XA-Datasources. So it is a recommended way to install the driver as a module. The following section shows how to a jdbc driver module is created.

Creating a Module

To create a module:

Go to WILDFLY_HOME/modules/system/layers/base/ and create the folder org/postgresql/main;
copy the file postgresql jdbc driver jar file to the new folderWILDFLY_HOME/modules/system/layers/base/org/postgresql/main
create the file module.xml in the same folder with the following content:

        <?xml version="1.0" encoding="UTF-8"?>
        <module xmlns="urn:jboss:module:1.1" name="org.postgresql">
            <resources>
                <resource-root path="postgresql-9.4.1211.jar"/>
            </resources>
            <dependencies>
                <module name="javax.api"/>
                <module name="javax.transaction.api"/>
            </dependencies>
        </module>

The name of the driver file may vary, so make sure you declare exactly the same name in the resource-root tag. At this point, the module is not available yet. Youneed to reference the module as a driver in WildFly configuration with the following jboss-cli command:

[standalone@localhost:9990 /] /subsystem=datasources/jdbc-driver=postgresql:add(
    driver-name=postgresql,
    driver-module-name=org.postgresql,
    driver-class-name=org.postgresql.Driver
)

The command returns {“outcome” => “success”} in case of success. This command resulted in the following part in the configuration file:

    <datasources>
        {...}
        <drivers>
            {...}
            <driver name="postgresql" module="org.postgresql">
                <driver-class>org.postgresql.Driver</driver-class>
            </driver>
        </drivers>
    </datasources>

It makes the JDBC driver module available for the datasource creation. So a datasource definition can now be defined to use the postgresql driver in the following way:

...
 <datasource ....>
 <connection-url>jdbc:postgresql://localhost/....</connection-url>
 <driver>postgresql</driver>
...

UTL_MATCH : String Matching by Testing Levels of Similarity/Difference

2017-02-20T15:05:00.000-04:00

The UTL_MATCH package was introduced in Oracle 10g Release 2, but first documented (and therefore supported) in Oracle 11g Release 2. It contains a variety of functions that are helpful for testing the level of similarity/difference between strings.

Setup

The examples in this article require the following table definition.

DROP TABLE match_tab;

CREATE TABLE match_tab (
  id   NUMBER,
  col1 VARCHAR2(15),
  col2 VARCHAR2(15),
  CONSTRAINT match_tab_pk PRIMARY  KEY (id)
);

INSERT INTO match_tab VALUES (1, 'Peter Parker', 'Pete Parker');
INSERT INTO match_tab VALUES (2, 'Peter Parker', 'peter parker');
INSERT INTO match_tab VALUES (3, 'Clark Kent', 'Claire Kent');
INSERT INTO match_tab VALUES (4, 'Wonder Woman', 'Ponder Woman');
INSERT INTO match_tab VALUES (5, 'Superman', 'Superman');
INSERT INTO match_tab VALUES (6, 'The Hulk', 'Iron Man');
COMMIT;

EDIT_DISTANCE

The "Edit Distance", or "Levenshtein Distance", test measures the similarity between two strings by counting the number of character changes (inserts, updates, deletes) required to transform the first string into the second. The number of changes required is know as the distance.

SELECT col1,
       col2,
       UTL_MATCH.edit_distance(col1, col2) AS ed
FROM   match_tab
ORDER BY id;

COL1            COL2                    ED
--------------- --------------- ----------
Peter Parker    Pete Parker              1
Peter Parker    peter parker             2
Clark Kent      Claire Kent              2
Wonder Woman    Ponder Woman             1
Superman        Superman                 0
The Hulk        Iron Man                 8

6 rows selected.

SQL>

EDIT_DISTANCE_SIMILARITY

The EDIT_DISTANCE_SIMILARITY function uses the same method as the EDIT_DISTANCE function to determine the similarity of the strings, but it returns a normalized result ranging from 0 (no match) to 100 (complete match).

SELECT col1,
       col2,
       UTL_MATCH.edit_distance_similarity(col1, col2) AS eds
FROM   match_tab
ORDER BY id;

COL1            COL2                   EDS
--------------- --------------- ----------
Peter Parker    Pete Parker             92
Peter Parker    peter parker            84
Clark Kent      Claire Kent             82
Wonder Woman    Ponder Woman            92
Superman        Superman               100
The Hulk        Iron Man                 0

6 rows selected.

SQL>


SELECT id,
       col1,
       col2,
       UTL_MATCH.edit_distance_similarity(col1, col2) AS eds
FROM   match_tab
WHERE  UTL_MATCH.edit_distance_similarity(col1, col2) > 90
ORDER BY id;

        ID COL1            COL2                   EDS
---------- --------------- --------------- ----------
         1 Peter Parker    Pete Parker             92
         4 Wonder Woman    Ponder Woman            92
         5 Superman        Superman               100

SQL>

JARO_WINKLER

The "Jaro-Winkler Algorithm" provides a different method for finding the distance between two strings.

SELECT col1,
       col2,
       UTL_MATCH.jaro_winkler(col1, col2) AS jw
FROM   match_tab
ORDER BY id;

COL1            COL2                    JW
--------------- --------------- ----------
Peter Parker    Pete Parker     9.288E-001
Peter Parker    peter parker    8.889E-001
Clark Kent      Claire Kent     9.083E-001
Wonder Woman    Ponder Woman    9.444E-001
Superman        Superman          1.0E+000
The Hulk        Iron Man        4.167E-001

6 rows selected.

SQL>

JARO_WINKLER_SIMILARITY

The JARO_WINKLER_SIMILARITY function uses the same method as the JARO_WINKLER function to determine the similarity of the strings, but it returns a normalized result ranging from 0 (no match) to 100 (complete match).

SELECT col1,
       col2,
       UTL_MATCH.jaro_winkler_similarity(col1, col2) AS jws
FROM   match_tab
ORDER BY id;

COL1            COL2                   JWS
--------------- --------------- ----------
Peter Parker    Pete Parker             92
Peter Parker    peter parker            88
Clark Kent      Claire Kent             90
Wonder Woman    Ponder Woman            94
Superman        Superman               100
The Hulk        Iron Man                41

6 rows selected.

SQL>


SELECT col1,
       col2,
       UTL_MATCH.jaro_winkler_similarity(col1, col2) AS jws
FROM   match_tab
WHERE  UTL_MATCH.jaro_winkler_similarity(col1, col2) > 90
ORDER BY id;

COL1            COL2                   JWS
--------------- --------------- ----------
Peter Parker    Pete Parker             92
Wonder Woman    Ponder Woman            94
Superman        Superman               100

SQL>

Adapter java

2016-10-16T00:56:00.000-04:00

Adapter

Busca una manera estandarizada de adaptar un objeto a otro. Se utiliza para transformar una interfaz en otra, de tal modo que una clase que no pudiera utilizar la primera, haga uso de ella a través de la segunda.
Es conocido como Wrapper (al patrón Decorator también se lo llama Wrapper, con lo cual es nombre Wrapper muchas veces se presta a confusión).
Una clase Adapter implementa un interfaz que conoce a sus clientes y proporciona acceso a una instancia de una clase que no conoce a sus clientes, es decir convierte la interfaz de una clase en una interfaz que el cliente espera. Un objeto Adapter proporciona la funcionalidad prometida por un interfaz sin tener que conocer que clase es utilizada para implementar ese interfaz. Permite trabajar juntas a dos clases con interfaces incompatibles.

Este patrón se debe utilizar cuando:

Se quiere utilizar una clase que llame a un método a través de una interface, pero se busca utilizarlo con una clase que no implementa ese interface.
Se busca determinar dinámicamente que métodos de otros objetos llama un objeto.
No se quiere que el objeto llamado tenga conocimientos de la otra clase de objetos.

Este patrón convierte la interfaz de una clase en otra interfaz que el cliente espera. Esto permite a las clases trabajar juntas, lo que de otra manera no podrían hacerlo debido a sus interfaces incompatibles.
Por lo general, esta situación se da porque no es posible modificar la clase original, ya sea porque no se tiene el código fuente de la clase o porque la clase es una clase de propósito general, y es inapropiado para ella implementar un interface par un propósito específico. En resumen, este patrón debe ser aplicado cuando debo transformar una estructura a otra, pero sin tocar la original, ya sea porque no puedo o no quiero cambiarla.

Diagrama UML

Target: define la interfaz específica del dominio que Cliente usa.
Cliente: colabora con la conformación de objetos para la interfaz Target.
Adaptado: define una interfaz existente que necesita adaptarse
Adapter: adapta la interfaz de Adaptee a la interfaz Target
El Cliente llama a las operaciones sobre una instancia Adapter. De hecho, el adaptador llama a las operaciones de Adaptee que llevan a cabo el pedido.

Ejemplo

Vamos a plantear el siguiente escenario: nuestro código tiene una clase Persona (la llamamos PersonaVieja) que se utiliza a lo largo de todo el código y hemos importado un API que también necesita trabajar con una clase Persona (la llamamos PersonaNueva), que si bien son bastante similares tienen ciertas diferencias:
Nosotros trabajamos con los atributos nombre, apellido y fecha de nacimiento.
Sin embargo, la PersonaNueva tiene un solo atributo nombre (que es el nombre y apellido de la persona en cuestión) y la edad actual, en vez de la fecha de nacimiento.

Para esta situación lo ideal es utilizar el Adapter. Para ello primero crearemos las 2 clases de Persona y sus correspondientes interfaces.

Ahora crearemos al Adapter.

Y se utiliza de esta manera:

Consecuencias

El cliente y las clases Adaptee permanecen independientes unas de las otras.
Puede hacer que un programa sea menos entendible.
Permite que un único Adapter trabaje con muchos Adaptees, es decir, el Adapter por sí mismo y las subclases (si es que la tiene). El Adapter también puede agregar funcionalidad a todos los Adaptees de una sola vez.

Temas a tener en cuenta.
Si bien el Adapter tiene una implementación relativamente sencilla, se puede llevar a cabo con varias técnicas:
1) Creando una nueva clase que será el Adaptador, que extienda del componente existente e implemente la interfaz obligatoria. De este modo tenemos la funcionalidad que queríamos y cumplimos la condición de implementar la interfaz.
2) Pasar una referencia a los objetos cliente como parámetro a los costructores de los objetos adapter o a uno de sus métodos. Esto permite al objeto adapter ser utilizado con cualquier instancia o posiblemente muchas instancias de la clase Adaptee. En este caso particular, el Adapter tiene una implementación casi idéntica al patrón Decorator.
3) Hacer la clase Adapter una clase interna de la clase Adaptee. Esto asume que tenemos acceso al código de dicha clase y que es permitido la modificación de la misma.
4) Utilizar sólo interfaces para la comunicación entre los objetos.

Las opciones más utilizadas son la 1 y la 4.

Docker 101 Tutorial

2016-05-23T18:58:00.000-04:00

Docker 101 Tutorial

This is a realistic interactive tutorial for understanding the basics of Docker.

It requires you to successfully complete each minitask, so could be used as an interviewing tool for those that claim to know Docker.

It uses a complete and realistic shell to train you in.

Below is a video showing what it looks like to the user.

Install and run

# install docker
# install python-pip (aka pip)
sudo pip install shutit
git clone --recursive https://github.com/ianmiell/docker-101-tutorial && cd docker-101-tutorial
./run.sh  #'sudo ./run.sh' if you need to use sudo to run docker

and follow the instructions.

How it works

Under the hood it uses ShutIt to manage the shell and Docker containers programmatically.

Download link

Authors and Contributors

@ianmiell

Support or Contact

Tweet @ianmiell

Support or Contact

Oracle/PLSQL: ORA-01403

2016-05-23T12:00:00.000-04:00

Learn the cause and how to resolve the ORA-01403 error message in Oracle.

Description

When you encounter an ORA-01403 error, the following error message will appear:

ORA-01403: no data found

Cause

You tried one of the following:

You executed a SELECT INTO statement and no rows were returned.
You referenced an uninitialized row in a table.
You read past the end of file with the UTL_FILE package.

Resolution

The option(s) to resolve this Oracle error are:

Option #1

Terminate processing of the data.

Libros y Manuales de MYSQL

2016-05-23T07:27:00.000-04:00

MySQL es un sistema de gestión de bases de datos relacional desarrollado bajo licencia dual GPL/Licencia comercial por Oracle Corporation y está considerada como la base datos open source más popular del mundo , y una de las más populares en general junto a Oracle y Microsoft SQL Server, sobre todo para entornos de desarrollo web.

Por lo tanto les comparto este pack de libros y manuales de MYSQL para que mejores tus conocimientos y habilidades con este Sistema de Gestión de Bases de Datos (SGBD).

Contenido:

Libros de SQL Server: Descargar

10 Useful “IP” Commands to Configure Network Interfaces

2016-05-22T16:43:00.001-04:00

In this post, we are going to review how we can assign Static IP Address, Static Route, Default Gateway etc. Assigning IP Address on demand using IP command. IFCONFIG command is deprecated and replaced by IPcommand in Linux. However, IFCONFIG command is still works and available for most of the Linux distributions.

Note: Please take configuration file backup before doing any changes.

How do i Configure Static IP Address Internet Protocol (IPv4)

To configure static IP Address, you need to update or edit network configuration file to assign an Static IP Address to a system. You must be superuser with su (switch user) command from terminal or command prompt.

For RHEL/CentOS/Fedora

Open and edit network configuration file for (eth0 or eth1) using your favorite editor. For example, to assigning IP Address to eth0 interface as follows.

[root@tecmint ~]# vi /etc/sysconfig/network-scripts/ifcfg-eth0

Simple output:

DEVICE="eth0"
BOOTPROTO=static
ONBOOT=yes
TYPE="Ethernet"
IPADDR=192.168.50.2
NAME="System eth0"
HWADDR=00:0C:29:28:FD:4C
GATEWAY=192.168.50.1

For Ubuntu/Debian/Linux Mint

auto eth0
iface eth0 inet static
address 192.168.50.2
netmask 255.255.255.0
gateway 192.168.50.1

Next, restart network services after entering all the details using the following command.

# /etc/init.d/networking restart

$ sudo /etc/init.d/networking restart

1. How to Assign a IP Address to Specific Interface

The following command used to assign IP Address to a specific interface (eth1) on the fly.

# ip addr add 192.168.50.5 dev eth1

$ sudo ip addr add 192.168.50.5 dev eth1

Note: Unfortunately all these settings will be lost after a system restart.

2. How to Check an IP Address

To get the depth information of your network interfaces like IP Address, MAC Address information, use the following command as shown below.

# ip addr show

$ sudo ip addr show

Sample Output

1: lo: <LOOPBACK,UP,LOWER_UP> mtu 16436 qdisc noqueue state UNKNOWN
    link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00
    inet 127.0.0.1/8 scope host lo
    inet6 ::1/128 scope host
       valid_lft forever preferred_lft forever
2: eth0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc pfifo_fast state UNKNOWN qlen 1000
    link/ether 00:0c:29:28:fd:4c brd ff:ff:ff:ff:ff:ff
    inet 192.168.50.2/24 brd 192.168.50.255 scope global eth0
    inet6 fe80::20c:29ff:fe28:fd4c/64 scope link
       valid_lft forever preferred_lft forever
3: eth1: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc pfifo_fast state UNKNOWN qlen 1000
    link/ether 00:0c:29:28:fd:56 brd ff:ff:ff:ff:ff:ff
    inet 192.168.50.5/24 scope global eth1
    inet6 fe80::20c:29ff:fe28:fd56/64 scope link
       valid_lft forever preferred_lft forever

3. How to Remove an IP Address

The following command will remove an assigned IP address from the given interface (eth1).

# ip addr del 192.168.50.5/24 dev eth1

$ sudo ip addr del 192.168.50.5/24 dev eth1

4. How to Enable Network Interface

The “up” flag with interface name (eth1) enables a network interface. For example, the following command will activates the eth1 network interface.

# ip link set eth1 up

$ sudo ip link set eth1 up

5. How to Disable Network Interface

The “down” flag with interface name (eth1) disables a network interface. For example, the following command will De-activates the eth1 network interface.

# ip link set eth1 down

$ sudo ip link set eth1 down

6. How do I Check Route Table?

Type the following command to check the routing table information of system.

# ip route show

$ sudo ip route show

Sample Output

10.10.20.0/24 via 192.168.50.100 dev eth0
192.168.160.0/24 dev eth1  proto kernel  scope link  src 192.168.160.130  metric 1
192.168.50.0/24 dev eth0  proto kernel  scope link  src 192.168.50.2
169.254.0.0/16 dev eth0  scope link  metric 1002
default via 192.168.50.1 dev eth0  proto static

7. How do I Add Static Route

Why you need to add Static routes or Manual routes, because that the traffic must not pass through the default gateway. We need to add Static routes to pass traffic from best way to reach the destination.

# ip route add 10.10.20.0/24 via 192.168.50.100 dev eth0

$ sudo ip route add 10.10.20.0/24 via 192.168.50.100 dev eth0

8. How to Remove Static Route

To remove assigned static route, simply type the following command.

# ip route del 10.10.20.0/24

$ sudo ip route del 10.10.20.0/24

9. How do I Add Persistence Static Routes

All the above route will be lost after a system restart. To add permanent Static route, edit file/etc/sysconfig/network-scripts/route-eth0 (We are storing static route for (eth0) and add the following lines and save and exist. By default route-eth0 file will not be there, need to be created.

For RHEL/CentOS/Fedora

# vi /etc/sysconfig/network-scripts/route-eth0
10.10.20.0/24 via 192.168.50.100 dev eth0

For Ubuntu/Debian/Linux Mint

Open the file /etc/network/interfaces and at the end add the persistence Static routes. IP Addresses may differ in your environment.

$ sudo vi /etc/network/interfaces

auto eth0
iface eth0 inet static
address 192.168.50.2
netmask 255.255.255.0
gateway 192.168.50.100
#########{Static Route}###########
up ip route add 10.10.20.0/24 via 192.168.50.100 dev eth0

Next, restart network services after entering all the details using the following command.

# /etc/init.d/network restart

$ sudo /etc/init.d/network restart

10. How do I Add Default Gateway

Default gateway can be specified globally or for in interface-specific config file. Advantage of default gateway is If we have more than one NIC is present in the system. You can add default gateway on the fly as shown below command.

# ip route add default via 192.168.50.100

$ sudo ip route add default via 192.168.50.100

Kindly correct me if i missed out. Please refer manual page doing man ip from terminal/command prompt to know more about IP Command.

Curso de Java y Tecnologías Java EE

2016-05-21T20:43:00.000-04:00

Documento en formato pdf de 145 páginas que contiene:
TEMA 1: HERRAMIENTAS DE DESARROLLO: ECLIPSE
1.1.- INTRODUCCIÓN
1.2.- ARTEFACTOS DE DESARROLLO Y RUNTIME
1.3.- AYUDANDO A ECLIPSE
TEMA 2: LENGUAJE JAVA Y POO
2.1.- PROGRAMACIÓN ORIENTADA A OBJETOS
2.2.- PROGRAMACIÓN ORIENTADA A A SPECTOS
2.3.- LENGUAJE JAVA
TEMA 3: PATRONES DE DISEÑO WEB
3.1.- INTRODUCCIÓN
3.2.- PATRONES WEB
3.3.- PATRÓN MVC

TEMA 4: ARQUITECTURA JAVA EE
4.1.- MODELO DE CAPAS
4.2.- ECLIPSE Y JAVA EE
TEMA 5: TECNOLOGÍAS JAVA EE
5.1.- T ECNOLOGÍAS VISTA : JSF
5.2.- T ECNOLOGÍAS CONTROL: EJB
5.3.- T ECNOLOGÍAS MODELO: JPA
TEMA 6: TECNOLOGÍAS AVANZADAS JAVA EE
6.1.- SERVICIOS WEB
6.2.- AUTENTICACIÓN JAVA EE
6.3.- PORTALES Y PORTLETS
APÉNDICE A: DIARIO DIGITAL
APÉNDICE B: CONFIGURAR PROYECTO ECLIPSE
B.1.- CREAR PROYECTO JAVA EE
B.2.- CONFIGURAR FACELETS Y RICHFACES
B.3.- CONFIGURAR HIBERNATE JPA Y HSQLDB
B.4.- CONFIGURAR SERVICIOS WEB
APÉNDICE C: TRANSPARENCIAS DEL CURSO

Link de descarga

Cómo eliminar virus que crea acceso directo de nuestra usb y computador

2016-05-21T19:14:00.002-04:00

En este post les quiero hablar de algo muy común en nuestro ordenador y que día tras día llegan para hacer daño a todos los archivo que tenemos en nuestro disco, el famoso "Virus", pero es un virus especial de muchos que circular por la red y que hace mucho daño si lo dejamos que se aloje en nuestro sistema operativo y también en nuestra memoria USB que causa el acceso directo, tal vez ya muchos sabrán como eliminarlo de nuestra USB y de nuestra computadora, pero también sé que muchos tienen que pagar para que alguien que sabe de sistemas le solucione ese problema que causa muchos dolores de cabeza. Con estas dos herramientas muy poderosas, podrán eliminar ese virus de su computadora y de su memoria usb y así poder tener todo bajo control sin necesidad de comando que lo único que hace si no sabemos usarlos es des configurar nuestro pc y perder no solo un archivo si no todo el sistema si se hace algo incorrecto.

Existen muchas maneras de quitar el famoso virus de acceso directo pero hoy les quiero recomendar dos aplicaciones muy fácil de utilizar ya que no necesitan de instalación, simplemente con un clip ya estará solucionado y con todos sus archivos funcionando correctamente.

Para empezar lo quitaremos primero de la memoria USB con la aplicación llamada Files Show que como dije al principio algunos no la conocen, otros si, en fin, sé que les servirá y siempre la tendrán a la mano para cuando llegue nuestro amigo, virus.

Quitar Virus Acceso Directo "USB"

File show, es una pequeña herramienta que recupera archivos ocultos por virus o por terceros, y elimina los archivos creados por el propio virus. Lo primero sería abrir con administrador, dar clip en Seleccionar Directorio, buscar nuestra memoria usb para seleccionarla y darle en aceptar.

El siguiente paso sería dar clip en "Desocultar archivos" para que empiece a reparar y limpiar todas nuestra información que necesitamos. Ya cuando finalice solo damos en aceptar de nuevo y ya tendríamos todo solucionado, libre de ese virus que nos estaba ocultando todo lo que guardamos con tanta importancia en nuestra USB.

Quitar virus Acceso Directo "Computador"

Como ya muchos han notado que cuando insertamos nuestra usb limpia a un computador que tenga el virus de acceso directo, en seguida todos nuestros archivos guardados de nuestra usb quedan infectados y totalmente ocultos, pero para ese problema también hay solución con la aplicación Usb File Resc, otra pequeña y poderosa herramienta que sin dar tantas vueltas buscando el nombre del virus con rutas o comandos, este programa automáticamente lo detecta y elimina sin dejar rastro alguno.Algo muy importante es que, Usb File Resc también sirve para las memorias usb igual que el anterior.
Damos en ejecutar como administrador y en la parte de abajo escribimos la palabra "Matar" y pulsamos Enter, luego presionamos cualquier tecla y nos pedirá el sistema operativo que tengamos, y damos de nuevo Enter para que comience a escanear y elimine el virus.

Cuando haya terminado pulsamos nuevamente cualquier tecla y ya podemos cerrar para luego ir la siguiente ruta y deshabilitar el proceso del virus para que no se ejecute al reiniciar la PC.Pulsamos en las teclas windows+R o buscamos en inicio Ejecutar y luego escribimos msconfig.

Seguido de esa ventana pulsamos en inicio de Windows, donde está el virus activo y ejecutándose sin ningún control. Simple mente debemos deshabilitar, si queremos solo lo que se encuentra con ese nombre de Microsoft, aunque en lo personal recomendaría que se deshabilite todos esos programas que inician cuando encendemos nuestra computadora, lo que hace más lento nuestro encendido, pero eso sería a criterio de cada uno. Para finalizar solo damos en aceptar y reiniciamos para que se hagan los cambios y con eso estaría todo solucionado y libre de ese virus que nos da problemas con nuestros archivos y memoria usb.

Ya para finalizar sería que recomendaras este artículo a tus amigos que tengan este problema y darle me gusta a mi blog, igual me pueden seguir en Facebook para que esté al tanto de todos mis artículos que subo a diario, un abrazo.

What is DevOps? - In Simple English

2016-05-21T16:16:00.003-04:00

Este moderno aparato en tu oído te hará entender cualquier idioma aunque no lo sepas

2016-05-21T15:52:00.000-04:00

La mayoría de nosotros nos hemos encontrado en la incómoda situación de intentar hablar un idioma extranjero. Algunas veces es gracioso, otras es simplemente vergonzoso y otras veces se trata de un completo desastre.

Sin embargo, gracias a este nuevo dispositivo de traducción que fácilmente cabe en tu oído, los días de sufrir por no lograr comunicarte en la lengua local se habrán terminado.

El dispositivo se llama “The Pilot” y Waverly Labs es la compañía que nos entrega tan fantástica e innovadora idea. Cuando llegue a las tiendas en septiembre, el sistema le permitirá a quién lo use, entender uno de varios idiomas en tiempo real a través del dispositivo puesto en el oído.

Una app te ayudará a navegar por los idiomas, pudiendo escoger entre español, inglés, francés e italiano.

El precio del The Pilot será de 129 dólares, y lo puedes reservar en la tienda oficial.

¿Qué te parece esta nueva creación? ¡Cuéntanos en los comentarios!

Fuente

Instalar MySQL 5.7.x en Fedora 23

2016-05-21T09:24:00.002-04:00

1.- Instalar el repositorio oficial de MySQL

sudo dnf -y localinstall http://dev.mysql.com/get/mysql57-community-release-fc23-7.noarch.rpm

2.- Actualizar repositorios:

sudo dnf -y update

Antes que nada, configurar la versión a utilizar en los repositorios de MySQL, para esto ejecutar los siguientes comandos:

sudo dnf config-manager --enable mysql57-community

sudo dnf repolist enabled | grep "mysql.*-community.*"

sudo dnf -y update

3.- Instalar MySQL

sudo dnf -y install mysql-community-server

4.- Iniciar el servicio de MySQL

sudo systemctl start mysql.service

5.- Antes de proseguir con la configuración de MySQL es necesario buscar la contraseña temporal que se le asigna al servidor con el siguiente comando:

sudo grep 'temporary password' /var/log/mysqld.log

Ahí se mostrará la contraseña, ahora así, ejecutar el comando:

6.- Configurar MySQL:

mysql_secure_installation

Y continuar con el establecimiento de contraseña de root, eliminar los usuarios anonimos, etc.

Lo habitual de estos comandos:

Set root password? [Y/n] Y
New password: 
Re-enter new password: 
Password updated successfully!
Reloading privilege tables..
 ... Success!


By default, a MySQL installation has an anonymous user, allowing anyone
to log into MySQL without having to have a user account created for
them.  This is intended only for testing, and to make the installation
go a bit smoother.  You should remove them before moving into a
production environment.

Remove anonymous users? [Y/n] Y
 ... Success!

Normally, root should only be allowed to connect from 'localhost'.  This
ensures that someone cannot guess at the root password from the network.

Disallow root login remotely? [Y/n] n
 ... skipping.

By default, MySQL comes with a database named 'test' that anyone can
access.  This is also intended only for testing, and should be removed
before moving into a production environment.

Remove test database and access to it? [Y/n] n
 ... skipping.

Reloading the privilege tables will ensure that all changes made so far
will take effect immediately.

Reload privilege tables now? [Y/n] Y
 ... Success!




All done!  If you've completed all of the above steps, your MySQL
installation should now be secure.

Thanks for using MySQL!


Cleaning up...

Fuente

Cambia los colores del terminal Linux

2016-05-20T12:00:00.000-04:00

Seguramente has notado que en algunas distribuciones GNU/Linux (OpenSuse es una de ellas), el Prompt en la terminal tiene un color distinto en relación a los demás comandos, esto le da un aspecto totalmente diferente, sin contar que una de sus ventajas es que nos permite ubicarnos de una manera mucho más sencilla en el comienzo y en el fin de una línea de comando. Pero esta característica no está en la mayoría de las distros, donde el promt siempre esta del mismo color que el resto del texto.

Pero una de las ventajas de GNU/Linux es que casi todo se puede configurar de acuerdo a las necesidades de cada quien, y si estás interesado en conocer cómo personalizar y cambiar el color o el aspecto del prompt, sigue leyendo que te cuento como hacerlo.

Entonces el primer paso que debemos hacer es cambiar la configuración del prompt para que se muestre con color.

Vamos a ubicarnos en la carpeta personal dentro de /home y oprimiremos Ctrl H, esto hará que las carpetas y archivos ocultos se hagan visibles.
Luego de eso vamos a localizar el archivo de configuración de Bash, que será .bashrc.
Para editarlo no debemos hacer mayor cosa que hacer clic con el botón secundario del mouse sobre el archivo y seleccionar abrir con Gedit, o con cualquier otro editor de texto que tengamos disponible.
Ya que estemos ahí, debemos ubicar la línea que dice “force_color_prompt=yes” y eliminamos el comentario que está delante de la línea (debemos eliminar el símbolo #).
Una vez que hayamos realizado esto se aplicara el color predeterminado, un color con una tonalidad verde.

Pero si eres una persona a la que le gusta personalizar todo un poco más allá de lo común, pues, continúa leyendo que aún hay más personalización del prompt. Esto que veras a continuación son unos trucos sencillos con los que puedes ir probando hasta conseguir el que más se ajuste a tus gustos.

El archivo de configuración de Bash guarda todos los parámetros relacionados con la configuración del prompt en una variable que lleva el nombre de PSI. Esto nos indica que para modificar “el look” del prompt, y su color debemos customizar los parámetros de PSI. Entonces para hacer esas modificaciones en PSI, debemos ir hasta la sentencia if else, estadebe estar entre las líneas 59 – 64, si eres usuario de Ubuntu, veras algo como esto:

if [ “$color_prompt” = yes ]; then

PS1=’${debian_chroot:+($debian_chroot)}[33[01;32m]\u@\h[33[00m]:[33[01;34m]\w[33[00m]\$ ‘

else

PS1=’${debian_chroot:+($debian_chroot)}\u@\h:\w\$ ‘

unset color_prompt force_color_prompt

Ahora bien, en la sentencia que está debajo del if se establece la variable PSI, en caso tal que se haya descomentado el color con el “force_color_prompt=yes”, y debajo del else se encuentra la variable definida, pero esta vez es en caso de que el color este deshabilitado.

Ya cuando hagamos esto se podra apreciar entonces, que en caso tal de que el color este habilitado, la variable PSI se vera muy parecido a esto:

PS1=’${debian_chroot:+($debian_chroot)}[33[01;32m]\u@\h[33[00m]:[33[01;34m]\w[33[00m]\$ ‘

Un aspecto un tanto más complejo, pero es este el que debes conocer para poder hacer las modificaciones, la información para eso es esta a continuación:

\u@ el nombre de usuario logueado luego del símbolo @
\h para el nombre del host
\w directorio actual de trabajo

Debemos escribir en código ANSI los parámetros para definir el color en cada parámetro que hemos visto, de manera predefinida el nombre de usuario y el nombre del host, se mostraran en color vede [33[01;30m], los dos puntos en color blanco [33[00m] y un color azulado para el directorio de trabajo [33[01;34m].

Aquí tienes otros parámetros que puedes colocar para que también se muestren en el prompt:

\d fecha (formato <martes abril 12>)
\v versión Bash
\j cantidad de tareas ejecutadas por la terminal

Si necesitas más colores, aquí tienes algunos con su propio código ANSI:

00;30 – Negro
00;37 – Gris Claro
01;37 – Blanco
01;31 – Rojo
01;32 – Verde Claro
01;34 – Azul Claro

Una recomendación a tener en cuenta, es que debemos deshabilitar la línea donde se define PSI con un # al inicio, de manera que Bash no la lea y luego definimos nuestra variable “personalizada” en la línea que sigue para que sea esta la que el sistema ejecute.

Ya con esta información puedes comenzar a personalizar el prompt y probar diferentes combinaciones de colores, hasta obtener la que mejor se adapte a tus gustos. Por si tienes dudas aquí te dejo otro ejemplo:

if [ “$color_prompt” = yes ]; then

#PS1=’${debian_chroot:+($debian_chroot)}[33[01;32m]\u@\h[33[00m]:[33[01;34m]\w[33[00m]\$ ‘

PS1=’${debian_chroot:+($debian_chroot)}[33[01;34m]\u@\h[33[00m]:[33[01;32m]\w[33[00m]\$’

else

PS1=’${debian_chroot:+($debian_chroot)}\u@\h:\w\$ ‘

unset color_prompt force_color_prompt

Si luego de hacer todos estos cambios en la configuración, quieres volver al estado original, solo debes borrar descomentar la línea en la que se define PSI y comentar la que añadimos anteriormente. Un aspecto a tener presente es que los cambios que realices en la configuración de Bash solo se aplicaran a la cuenta en la que estés al momento de realizarlos, (si estas logueado en tu usuario estándar, cuando pases a root, el prompt seguirá como esté por defecto).

Fuente

Construyendo con Bloques en PL/SQL

2016-05-20T10:38:00.000-04:00

Parte 1 en una serie de artículos sobre la comprensión y uso de PL/SQL

El lenguaje PL/SQL de Oracle celebró su cumpleaños número 22 en 2011. Lo sé porque estoy mirando la primera guía del usuario de Oracle PL/SQL que se haya publicado, es de la versión 1.0 de PL/SQL, y su fecha de publicación es Setiembre de 1989. Estaba trabajando para Oracle en ese momento, construyendo las primeras herramientas de automatización utilizadas por la fuerza de ventas de Oracle EE.UU. Ya había trabajado con PL/SQL dentro de SQL Forms 3.0, pero fue con el lanzamiento de la base de datos Oracle 6, que PL/SQL estuvo disponible como un lenguaje independiente para desarrollo de aplicaciones.

Tres años más tarde, escribí mi primer libro sobre PL/SQL y desde entonces he estudiado este lenguaje, he desarrollado montones y montones de código PL/SQL, y he escrito sobre este excelente lenguaje de programación de base de datos. Por supuesto, yo no era el único. Miles de desarrolladores en todo el mundo han construido una multitud de aplicaciones basadas en Oracle PL/SQL en las décadas desde que se liberó.

Lo mejor de todo es que sigue habiendo un flujo constante de nuevos desarrolladores PL/SQL. De hecho, con la aparición relativamente reciente de la India, China y otras naciones como potencias de tecnología, he visto a toda una nueva generación de desarrolladores descubrir PL/SQL y trabajar para dominarlo.

Para ayudar a que los recién llegados a PL/SQL saquen el máximo provecho de este lenguaje, Oracle Magazine me ha pedido que escriba una serie de artículos para principiantes, de los cuales éste es el primero. Si usted es un desarrollador experimentado en PL/SQL, también puede encontrar en estos artículos un repaso práctico sobre sus fundamentos.

Para esta serie de artículos, voy a suponer que a pesar de ser nuevos en PL/SQL, mis lectores han tenido alguna experiencia en programación y están familiarizados con SQL. Mi enfoque general, además, estará en conseguir desarrolladores productivos en PL/SQL lo más rápido posible.

¿Qué es PL/SQL?

Para contestar esta pregunta, es importante recordar que en cada sitio Web que visitamos, cada aplicación que se ejecuta es construida sobre un stack (una pila) de tecnologías de software. En la parte superior de la pila está la capa de presentación, las pantallas o dispositivos interactivos con los que el usuario interactúa directamente (hoy en día los lenguajes más populares para las capas de presentación son Java y .NET). En la parte inferior de la pila está el lenguaje de máquina que se comunica con el hardware.

En algún lugar en medio de la pila de tecnología se encuentra la base de datos, el software que nos permite almacenar y manipular grandes volúmenes de datos complejos. La tecnología de bases de datos relacionales, construida en torno a SQL, es la tecnología de base de datos dominante en el mundo de hoy.

SQL es un lenguaje de conjuntos muy poderoso, cuyo único objetivo es manipular el contenido de bases de datos relacionales. Si usted desarrolla aplicaciones basadas en bases de datos Oracle, usted (o el código de alguien que escribe en un nivel inferior de la pila de la tecnología) debe ejecutar sentencias SQL para recuperar datos desde o cambiar datos en la base de datos. Sin embargo, SQL no se puede utilizar para implementar toda la lógica de negocios y la funcionalidad que el usuario final necesita en nuestras aplicaciones. Esto nos lleva a PL/SQL.

PL/SQL significa Procedural Language/Structured Query Language (una extensión de programación estructurada sobre SQL). PL/SQL ofrece un conjunto de instrucciones clásicos de la programación estructurada (instrucción condicional IF, loops o iteraciones, asignaciones), organizado dentro de bloques (lo que se explica más adelante), que complementan y amplían el alcance de SQL.

Sin duda que es posible crear aplicaciones sobre Oracle y SQL sin usar PL/SQL. Sin embargo, utilizar PL/SQL para realizar operaciones específicas de bases de datos, particularmente la ejecución de sentencias SQL, ofrece varias ventajas, incluyendo una estrecha integración con SQL, un mejor rendimiento a través del tráfico de red reducido, y la portabilidad (los programas PL/SQL pueden correr en cualquier instancia de base de datos Oracle). Por lo tanto, el código del front-end de muchas aplicaciones ejecuta tanto sentencias SQL como bloques PL/SQL, para maximizar el rendimiento al tiempo que mejora la capacidad de mantenimiento de las aplicaciones.

Construyendo bloques de programas PL/SQL

PL/SQL es un lenguaje estructurado con bloques. Un bloque PL/SQL es definido por las palabras clave DECLARE, BEGIN, EXCEPTION, y END, que dividen el bloque en tres secciones

1. Declarativa: sentencias que declaran variables, constantes y otros elementos de código, que después pueden ser usados dentro del bloque
2. Ejecutable: sentencias que se ejecutan cuando se ejecuta el bloque
3. Manejo de excepciones: una sección especialmente estructurada para atrapar y manejar cualquier excepción que se produzca durante la ejecución de la sección ejecutable

Sólo la sección ejecutable es obligatoria. No es necesario que usted declare nada en un bloque, ni que maneje las excepciones que se puedan lanzar.

Un bloque es en sí mismo una sentencia ejecutable, por lo que se pueden anidar los bloques unos dentro de otros.

Aquí hay algunos ejemplos:

El clásico “¡Hola Mundo!” es un bloque con una sección ejecutable que llama al procedimiento DBMS_OUTPUT.PUT_LINE para mostrar texto en pantalla:

BEGIN
  DBMS_OUTPUT.put_line('¡Hola Mundo!');
END;

Las funciones y procedimientos —tipos de bloques con un nombre— son discutidos con mayor detalle más adelante en este artículo, así como los paquetes. En pocas palabras, sin embargo, un paquete es un contenedor de múltiples funciones y procedimientos. Oracle extiende PL/SQL con muchos paquetes incorporados en el lenguaje.

El siguiente bloque declara una variable de tipo VARCHAR2 (un string) con un largo máximo de 100 bytes para contener el string ‘¡Hola Mundo!’. Después, el procedimiento DBMS_OUTPUT.PUT_LINE acepta la variable, en lugar del literal, para desplegarlo:

DECLARE
  l_mensaje VARCHAR2(100) := '¡Hola Mundo!';
BEGIN
  DBMS_OUTPUT.put_line(l_mensaje);
END;

Note que he llamado a la variable l_mensaje. Normalmente uso el prefijo l_ para variables locales —variables definidas dentro del código de un bloque— y el prefijo g_ para variables globales definidas en un paquete.

El siguiente ejemplo de bloque agrega una sección de manejo de excepciones que atrapa cualquier excepción (WHEN OTHERS) que pueda ser lanzada y muestra el mensaje de error, que es retornado por la función SQLERRM (provista por Oracle).

DECLARE
  l_mensaje VARCHAR2(100) := '¡Hola Mundo!';
BEGIN
  DBMS_OUTPUT.put_line(l_mensaje);
EXCEPTION
  WHEN OTHERS
    THEN
      DBMS_OUTPUT.put_line(SQLERRM);
END;

El siguiente ejemplo de bloque demuestra la habilidad de PL/SQL de anidar bloques dentro de bloques así como el uso del operador de concatenación (||) para unir múltiples strings.

DECLARE
  l_mensaje VARCHAR2(100) := '¡Hola';
BEGIN
  DECLARE
    l_mensaje2 VARCHAR2(100) := l_mensaje || ' Mundo!'; 
  BEGIN
    DBMS_OUTPUT.put_line(l_mensaje2);
  END;
EXCEPTION
  WHEN OTHERS
    THEN
      DBMS_OUTPUT.put_line(DBMS_UTILITY.format_error_stack);
END;

Ejecutando bloques PL/SQL

Una vez que hemos escrito un bloque de código PL/SQL éste se puede ejecutar. Existen muchas herramientas para ejecutar código PL/SQL. La más básica es SQL*Plus, una interfaz de línea de comandos para ejecutar sentencias SQL así como bloques PL/SQL. La Figura 1 muestra un ejemplo de ejecución del más simple de los bloques de ejemplo de nuestro “¡Hola Mundo!” en SQL*Plus.

Figura 1: Ejecutando “¡Hola Mundo!” en SQL*Plus

La primera cosa que hacemos después de conectarnos a la base mediante SQL*Plus es habilitar la salida del servidor, por lo que las llamadas a DBMS_OUTPUT.PUT_LINE resultarán en la visualización de texto en la pantalla. Luego escribimos el código que constituye nuestro bloque. Finalmente, ingresamos una barra (/) para decirle a SQL*Plus que ejecute ese código.

SQL*Plus entonces ejecuta el bloque y muestra el “¡Hola Mundo!” en la pantalla. SQL*Plus es provisto por Oracle como una especie de línea base de entorno donde se pueden ejecutar sentencias SQL y bloques PL/SQL. Mientras que algunos desarrolladores siguen utilizando únicamente SQL*Plus, la mayoría utiliza un entorno de desarrollo integrado (IDE). Entre los más populares de estos entornos de desarrollo (basado en encuestas informales que he tomado en mis sesiones de entrenamiento) son

• Oracle SQL Developer, de Oracle • Toad y SQL Navigator, de Quest Software • PL/SQL Developer, de Allround Automations

Cada herramienta ofrece, con algunas diferencias, ventanas y pasos para crear, guardar, y ejecutar bloques PL/SQL, así como habilitar y deshabilitar la salida del servidor. En esta serie de artículos, voy a suponer que sólo tienen acceso a SQL*Plus y que van a ejecutar todas las sentencias en una ventana de comandos SQL*Plus.

¡Póngale nombre a los bloques!

Todos los bloques que hemos visto hasta el momento son “anónimos”, no tienen nombres. Si los bloques anónimos fueran la única manera de organizar el código, sería muy difícil usar PL/SQL para crear una aplicación grande y compleja. Por esto, PL/SQL soporta la definición de bloques nombrados (named blocks), también conocidos como subprogramas. Los subprogramas pueden ser procedimientos o funciones. Generalmente, un procedimiento se utiliza para realizar una acción y una función se utiliza para calcular y devolver un valor. Voy a tratar sobre subprogramas con mucho más detalle en un próximo artículo de esta serie. Por ahora, vamos a asegurarnos de que se comprendan los conceptos básicos detrás de la creación del subprograma.

Supongamos que necesitamos mostrar "¡Hola Mundo!" desde múltiples lugares en nuestra aplicación. Queremos evitar la repetición de la misma lógica en todos esos lugares. Por ejemplo, ¿qué pasa cuando tenemos que cambiar el mensaje, tal vez para "¡Hola Universo!"? Vamos a tener que encontrar todos los lugares en nuestro código donde esta lógica aparece.

En su lugar, vamos a crear un procedimiento denominado hola_mundo mediante la ejecución de la siguiente sentencia DDL (Data Definition Language):

CREATE OR REPLACE PROCEDURE hola_mundo IS
  l_mensaje VARCHAR2(100) := '¡Hola Mundo!';
BEGIN
  DBMS_OUTPUT.put_line(l_mensaje);
END hola_mundo;

Con esto hemos extendido PL/SQL. Además de llamar a los programas creados por Oracle e instalados en la base de datos (como DBMS_OUTPUT.PUT_LINE), podemos llamar a nuestro propio subprograma dentro de un bloque PL/SQL:

BEGIN
   hola_mundo;
END;

Hemos escondido todos los detalles de cómo decir hola al mundo dentro del cuerpo (body), o implementación, de nuestro procedimiento. Ahora podemos llamar a este procedimiento hola_mundo y mostrar el mensaje deseado sin tener que escribir la llamada a DBMS_OUTPUT.PUT_LINE o averiguar la forma correcta de darle formato al texto. Podemos llamar a este procedimiento desde cualquier lugar en nuestra aplicación. Así que si alguna vez necesitamos cambiar ese texto, lo vamos a hacer en un solo lugar, el único punto de definición de ese texto.

El procedimiento hola_mundo es muy simple. Tus procedimientos tendrán mucho más código, y casi siempre también tendrán parámetros. Los parámetros pasan información a los subprogramas, cuando éstos son llamados, y es lo que permite crear subprogramas más flexibles y genéricos. Se pueden usar en muchos contextos diferentes.

He mencionado antes que algún día puede ser que desee mostrar "¡Hola Universo!" en lugar de "¡Hola Mundo!". Podría hacer una copia de nuestro procedimiento hola_mundo y cambiar el texto que se muestra:

CREATE OR REPLACE PROCEDURE hola_universo IS
  l_mensaje VARCHAR2(100) := '¡Hola Universo!';
BEGIN
  DBMS_OUTPUT.put_line(l_mensaje); 
END hola_universo;

Podríamos, sin embargo, terminar con las decenas de variantes del “mismo” procedimiento hola, que haría muy difícil mantener nuestra aplicación. Un enfoque mucho mejor es analizar el procedimiento e identificar qué partes se mantienen incambiadas (son estáticas) cuando el mensaje tiene que cambiar y qué partes cambian. Luego podemos pasar las partes que cambian como parámetros y tener un procedimiento único que se puede utilizar en diferentes circunstancias.

Así que vamos a cambiar hola_mundo (y hola_universo) a un nuevo procedimiento, hola_lugar:

CREATE OR REPLACE PROCEDURE hola_lugar (lugar_in IN VARCHAR2) IS
  l_mensaje  VARCHAR2(100);
BEGIN
  l_mensaje  := '¡Hola ' || place_in;
  DBMS_OUTPUT.put_line(l_mensaje);
END hola_lugar;

Justo después del nombre del procedimiento, añadimos entre paréntesis de apertura y cierre, un único parámetro. Podemos tener varios parámetros, pero cada parámetro de la misma forma básica:

nombre_de_parametro   modo_de_parametro   tipo_de_datos

En otras palabras, debemos proveer un nombre para el parámetro, el modo o forma en que éste será usado (IN = sólo lectura), y el tipo de dato que será pasado al subprograma a través de este parámetro.

En este caso, vamos a pasar un texto de sólo lectura al procedimiento hola_lugar.

Y ahora podemos saludar a nuestro mundo y a nuestro universo como sigue:

BEGIN
   hola_lugar('Mundo!');
   hola_lugar('Universo!');
END;

Más adelante en esta serie vamos a explorar el concepto de reutilización y la manera de evitar la repetición, pero debes ser capaz de ver en este ejemplo, el poder de ocultar la lógica detrás de un bloque con nombre.

Ahora supongamos que no sólo queremos mostrar nuestros mensajes "Hola". A veces tenemos que mantener los mensajes en una tabla en la base de datos; en otras ocasiones, tenemos que pasar el texto de nuevo al entorno del cliente para su visualización en un navegador Web. En otras palabras, necesitamos separar la forma en que se construyó el mensaje "Hola" de la forma en que se utiliza (se visualiza, se guarda, se envía otro programa, etc). Podemos alcanzar este nivel deseado de flexibilidad moviendo el código que construye el mensaje a su propia función:

CREATE OR REPLACE FUNCTION 
hola_mensaje(lugar_in IN VARCHAR2) RETURN VARCHAR2 IS
BEGIN
   RETURN '¡Hola ' || place_in;
END hola_mensaje;

Este subprograma se diferencia del procedimiento original en lo siguiente:

• El tipo de programa es ahora FUNCTION y no PROCEDURE.
• El nombre del subprograma ahora describe los datos que se devuelven, no las acciones tomadas.
• El cuerpo o la implementación del subprograma contiene ahora una cláusula RETURN que construye el mensaje y lo devuelve al bloque llamador.
• La cláusula RETURN después de la lista de parámetros establece el tipo de datos devuelto por la función.

Teniendo el código necesario para construir el mensaje dentro de la función hola_mensaje, podemos utilizar este mensaje de múltiples maneras. Podemos, por ejemplo, llamar a la función para obtener el mensaje y asignárselo a una variable:

DECLARE
  l_mensaje  VARCHAR2(100);
BEGIN
  l_mensaje := hola_mensaje('Universo');
END;

Nota que llamamos a la función hola_mensaje como parte de una sentencia PL/SQL (en este caso, la asignación de un texto a una variable). La función hola_mensaje devuelve un string, por lo que se puede utilizar en lugar de un string en cualquier sentencia ejecutable.

También podemos volver a nuestro procedimiento hola_lugar y reemplazar el código utilizado para crear el string con una llamada a la función:

CREATE OR REPLACE PROCEDURE 
hola_lugar(place_in IN VARCHAR2) IS
BEGIN
  DBMS_OUTPUT.put_line(hola_mensaje(place_in));
END hola_lugar;

También podemos llamar la función desde una sentencia SQL. En el siguiente bloque, insertamos el mensaje en una tabla de la base:

BEGIN
  INSERT INTO tabla_mensaje(fecha_mensaje, texto_mensaje)
      VALUES (SYSDATE, hola_mensaje('Montevideo'));
END;

Aunque la lógica del “mensaje hola” es muy simple, demuestra el poder de asignar nombres a una o más sentencias ejecutables (un algoritmo) y luego referenciar el algoritmo simplemente especificando el nombre y los parámetros requeridos.

Los bloques PL/SQL con nombre, permiten construir aplicaciones complejas que pueden ser comprendidas y mantenidas con relativa facilidad.

Sobre los nombres en una base Oracle

Ahora que ya se aprecia la importancia de asignar nombres a la lógica, es tiempo de hablar sobre las reglas para los nombres (o, para ser más precisos, identificadores) tanto en PL/SQL como, de forma más general, en una base Oracle.

Estas son las reglas para construir identificadores válidos en una base Oracle:

• El largo máximo es de 30 caracteres.
• El primer caracter debe ser una letra, pero cada caracter después del primero puede ser una letra, un número (0 a 9), un signo de pesos ($), un guión bajo (_), o un numeral (#). Todos los siguientes son identificadores válidos:

hola_mundo
hola$mundo
hola#mundo

pero estos son inválidos:
1hola_mundo
hola%mundo

• PL/SQL es case-insensitive (no es sensitivo a mayúsculas y minúsculas) con respecto a los identificadores. PL/SQL trata todos los siguientes como el mismo identificador:

hola_mundo
Hola_Mundo
HOLA_MUNDO

Para ofrecer más flexibilidad, Oracle permite evitar las restricciones de la segunda y tercera regla, encerrando al identificador entre comillas dobles. Un quoted identifier (identificador encerrado entre comillas) puede contener cualquier secuencia de caracteres imprimibles excluyendo las comillas dobles; las diferencias entre mayúsculas y minúsculas serán además preservadas. Así, todos los siguientes identificadores son válidos y distintos:

"Abc"
"ABC"
"a b c"

Es muy raro encontrar identificadores entre comillas en código PL/SQL; algunos grupos de desarrollo los usan para conformar con sus convenciones de nombres o porque encuentran que una mezcla de mayúsculas y minúsculas resulta más fácil de leer.

Estas mismas reglas aplican a los nombres de los objetos de base de datos como tablas, vistas y procedimientos, con una regla adicional: a menos que se encierren entre comillas los nombres de estos objetos, Oracle los mantendrá en mayúsculas.

Así que cuando creamos un procedimiento como el que sigue:

CREATE OR REPLACE PROCEDURE hola_mundo IS
BEGIN
  DBMS_OUTPUT.put_line('¡Hola Mundo!');
END hola_mundo;

la base de datos Oracle lo mantendrá con el nombre HOLA_MUNDO.

En el bloque siguiente, llamaremos este procedimiento tres veces, y aunque el nombre luzca diferente cada vez, siempre se ejecutará el mismo procedimiento:

BEGIN
   hola_mundo;
   HOLA_MUNDO;
   "HOLA_MUNDO";
END;

Por otro lado, la base Oracle no será capaz de ejecutar el procedimiento si lo llamamos como sigue:

BEGIN
   "hola_mundo";
END;

Esto buscará dentro de la base un procedimiento llamado hola_mundo en lugar de HOLA_MUNDO.

Si no se quiere que los nombres de los subprogramas se mantengan en mayúsculas, los nombres se deben encerrar entre comillas cuando se crea el subprograma:

CREATE OR REPLACE PROCEDURE "Hola_Mundo" IS
BEGIN
  DBMS_OUTPUT.put_line('¡Hola Mundo!');
END "Hola_Mundo";

Ejecutando SQL dentro de bloques PL/SQL

PL/SQL es un lenguaje de programación de base de datos. Casi todos los programas que escribiremos en PL/SQL leerán desde, o escribirán en, una base de datos Oracle utilizando SQL. Aunque estas series asumen que se conoce SQL, debemos estar conscientes de la forma en que llamamos a las sentencias desde un bloque PL/SQL.

Y aquí hay algunas buenas noticias: Oracle hace que sea muy fácil escribir y ejecutar sentencias SQL en PL/SQL. La mayor parte de las veces, simplemente escribiremos las sentencias SQL directamente en nuestro bloque PL/SQL y después agregaremos el código necesario para la interfaz entre las sentencias SQL y el código PL/SQL.

Supongamos, por ejemplo, que tenemos una tabla llamada empleados, con una columna clave primaria id_empleado, y una columna apellido. Podemos ver el apellido del empleado con ID 138, como sigue:

SELECT apellido
  FROM empleados
 WHERE id_empleado = 138

Ahora querríamos ejecutar esta misma consulta dentro de nuestro bloque PL/SQL y desplegar el nombre. Para hacer esto, necesitaremos “copiar” el apellido desde la tabla a una variable local, lo cual podemos hacer con la cláusula INTO:

DECLARE
  v_apellido empleados.apellido%TYPE;
BEGIN
  SELECT apellido
    INTO v_apellido
    FROM empleados
   WHERE id_empleado = 138;

  DBMS_OUTPUT.put_line(v_apellido);
END;

Primero declaramos una variable local, y haciendo esto introducimos otra característica elegante de PL/SQL: la capacidad de fijar el tipo de datos de nuestra variable en función del tipo de datos de una columna en una tabla (esto será profundizado más adelante en esta serie)

Después ejecutamos una consulta contra la base, obteniendo el apellido del empleado y asignándolo directamente en la variable v_apellido.

Por supuesto, querremos hacer más que ejecutar sentencias SELECT en PL/SQL, también querremos insertar, modificar y eliminar datos desde PL/SQL. Aquí hay ejemplos de cada uno de esos tipos de sentencias DML:

• Eliminamos todos los empleados en el departamento 10 y mostramos cuántas tuplas fueron eliminadas:

DECLARE
  v_id_departamento empleados.id_departamento%TYPE := 10;
BEGIN
  DELETE FROM empleados
       WHERE id_departamento = v_id_departamento;

  DBMS_OUTPUT.put_line(SQL%ROWCOUNT);
END;

Referenciamos la variable PL/SQL directamente dentro de la sentencia DELETE. Cuando el bloque se ejecuta, la variable se reemplaza con el valor actual, 10, y el DELETE es ejecutado por el motor de SQL. SQL%ROWCOUNT es un atributo especial de cursor que retorna el número de tuplas modificadas por la última sentencia DML ejecutada en nuestra sesión.

• Modificar todos los empleados en el departamento 10 con un 20% de incremento salarial.

DECLARE
  v_id_departamento empleados.id_departamento%TYPE := 10;
BEGIN
  UPDATE empleados
    SET salario = salario * 1.2
   WHERE id_departamento = v_id_departamento;

  DBMS_OUTPUT.put_line(SQL%ROWCOUNT);
END;

Insertar un nuevo empleado en la tabla.

BEGIN
  INSERT INTO empleados (id_empleado
                       , apellido
                       , id_departamento
                       , salario)
       VALUES (100
             , 'Feuerstein'
             , 10
             , 200000);

  DBMS_OUTPUT.put_line(SQL%ROWCOUNT);
END;

En este bloque, proveímos los valores de las columnas como literales, en lugar de variables, directamente dentro de la sentencia SQL.

Recursos para Desarrolladores PL/SQL

Si recién estás comenzando con PL/SQL, deberías conocer y aprovechar la multitud de recursos gratuitos online que existen. Aquí hay algunos de los más populares y útiles:

La página de PL/SQL en OTN (Oracle Technology Network), en oracle.com/technetwork/database/features/plsql: un excelente punto de comienzo para explorar recursos de PL/SQL en el popular sitio de OTN
PL/SQL Obsession, en ToadWorld.com/SF: una colección de recursos de desarrollo PL/SQL del autor, incluyendo material de entrenamiento, presentaciones, código ejemplo, estándares, videos de buenas prácticas, y más
PL/SQL Challenge, en plsqlchallenge.com: una pregunta diaria sobre PL/SQL que te ayudará a evaluar y mejorar tu conocimiento sobre PL/SQL

A continuación: Controlando la ejecución en el bloque

En este artículo, has aprendido cómo se enmarca PL/SQL en el amplio mundo de la base de datos Oracle. Has aprendido también cómo definir bloques de código PL/SQL y a nombrar esos bloques, de forma que el código de tu aplicación puede ser utilizado y mantenido con más facilidad. Finalmente, fuiste introducido en la ejecución de sentencias SQL dentro de PL/SQL.

¿Por qué anidar bloques?

Podemos poner BEGIN antes de cualquier conjunto de una o más sentencias ejecutables seguidas de un END, creando un bloque anidado con esas sentencias. Hay dos ventajas principales para hacer esto: (1) posponer la asignación de memoria para variables que se necesitan únicamente en el bloque anidado, y (2) limitar la propagación de una excepción lanzada por una de las sentencias del bloque anidado.

Consideremos el siguiente bloque:

DECLARE
  l_mensaje1  VARCHAR2(100) := 'Hola';
  l_mensaje2  VARCHAR2(100) := ' Mundo!';
BEGIN
  IF SYSDATE >= TO_DATE('01-JAN-2012')
  THEN
    l_mensaje2 := l_mensaje1 || l_mensaje2;
    DBMS_OUTPUT.put_line(l_mensaje2);
  ELSE
    DBMS_OUTPUT.put_line(l_mensaje1);
  END IF;
END;

El bloque despliega “¡Hola Mundo!” cuando la fecha de hoy (retornada por SYSDATE) es por lo menos el primer día de 2012; en otro caso, únicamente despliega el mensaje “Hola”. Aunque este bloque se ejecute en 2011, asigna memoria para la variable l_mensaje2.

Si reestructuramos este bloque, la memoria para l_mensaje2 será asignada únicamente después del 2011:

DECLARE
   l_mensaje1  VARCHAR2(100) := 'Hola';
BEGIN
   IF SYSDATE > TO_DATE('01-JAN-2011')
   THEN
      DECLARE
         l_mensaje2  VARCHAR2(100) := ' Mundo!';
      BEGIN
         l_mensaje2 := l_mensaje1 || l_mensaje2;
         DBMS_OUTPUT.put_line(l_mensaje2);
      END;
   ELSE
      DBMS_OUTPUT.put_line(l_mensaje1);
   END IF;
END;

De forma similar, podemos agregar una sección de excepciones a este bloque anidado, atrapando errores y permitiendo que el bloque exterior continúe con su ejecución:

DECLARE
   l_mensaje1  VARCHAR2(100) := 'Hola';
BEGIN
   DECLARE
      l_mensaje2  VARCHAR2(5);
   BEGIN
      l_mensaje2 := ' Mundo!';
      DBMS_OUTPUT.put_line(l_mensaje1 || l_mensaje2);
   EXCEPTION
      WHEN OTHERS
      THEN
         DBMS_OUTPUT.put_line(DBMS_UTILITY.format_error_stack);
   END;
   DBMS_OUTPUT.put_line(l_mensaje1);
END;

En este caso, el bloque anidado lanzará una excepción VALUE_ERROR, porque la variable l_mensaje2 es muy pequeña (máximo de 5 bytes) para el texto “ Mundo!”.La sección de excepciones del bloque anidado atrapará y desplegará el error. El bloque exterior continuará su ejecución.

Un posterior artículo en estas series se enfocará en cómo funciona el manejo de excepciones en PL/SQL.

Más adelante en esta serie de artículos, mostraré cómo controlar el flujo de ejecución en nuestros bloques: lógica condicional con IF y CASE; lógica iterativa con FOR, WHILE y LOOP; así como lanzar y manejar excepciones.

Fuente

Como Instalar PHP en Centos 7

2016-05-20T01:30:00.000-04:00

Para que funciones correctamente un servidor web con PHP necesitas tener instalado un servidor web, en Centos 7 tienes varias opciones y puedes instalar alguno de los servidores web disponibles y yo te digo como instalra Lighttp o Apache

Instalar servidor web Apache (http) en centos

Instalar Lighttpd en Centos 7

Una vez que tienes instalado el servidor web puedes instalar el PHP con los siguientes comandos:

yum install php

Si vas a trabajar en un servidor LLMP o LAMP entonces ya debes tener instalado MariaDB (el servidor de DB que reemplaza a MySQL en Centos 7) y para poder utilizar la base de datos en los scripts PHP debes tener el soporte para MySQL para ello debes instalarlo con este comando:

yum install php-mysql

Para estar seguro que el servicio esté funcionando con el soporte para PHP debes reiniciar el servicio, en este caso asumiendo que tenemos Apache instalado.

systemctl restart httpd.service

Instalar otros módulos de PHP

Existen otros módulos de PHP que proveen funcionalidades adicionales, uno de ellos el que permite gestionar las conexiones para MySQL y que probablemente ya hayas instalado. Para ver la lista completa de los módulos PHP disponibles puedes usar este comando:

yum serach php-

Este comando emitirá un listado de los módulos disponibles y una breve descripción de lo que hace el módulo. Aquí te muestro un fragmento de lo que el comando anterior muestra:

php-embedded.x86_64 : PHP library for embedding in applications
php-enchant.x86_64 : Enchant spelling extension for PHP applications
php-fpm.x86_64 : PHP FastCGI Process Manager
php-gd.x86_64 : A module for PHP applications for using the gd graphics library
php-intl.x86_64 : Internationalization extension for PHP applications
php-ldap.x86_64 : A module for PHP applications that use LDAP

Para instalar alguno de estos módulos solo tienes que utilizar la parte que esta antes de los caracteres .x86_64, por ejemplo si necesitas instalar el módulo de la librería gráfica gd entonces el módulo es “php-gd” o si necesitas soporte para LDAP debes escribir “php-ldap”.

Para instalar algunos de estos ejemplos puedes usar el comando “yum install modulo” para los módulo que necesites, por ejemplo para instalar los dos módulos mencionados en el párrafo anterior podrías usar este comando:

yum install php-gd php-ldap

Recuerda que puedes instalar todos los módulos adicionales que requieras.

Validar que PHP funciona

Para validar que PHP está funcionando en tu servidor debes crear un archivo

echo "<?php echo \"funciona.\"; phpinfo(); ?>" > info.php
mv info.php /var/www/html/

Luego solo tienes que abrir un navegador web e ingresar la dirección IP o dominio del servidor que estés instalando y agregar info.php para visualizar este archivo, por ejemplo:

http://localhost/info.php

Para validar la instalación de PHP se debe observar en la página web algo parecido a lo que te muestro en la siguiente imagen:

Si ves esta imagen entonces tu instalación de PHP está funcionando y solo resta borrar este archivo pues representa un riesgo de seguridad. Para hacerlo ejecuta:

rm /var/www/html/info.php

Recuerda que puedes ver la lista completa servicios que puedes instalar en Centos, esta lista está al final del artículo. Para verlo da click en el siguiente botón:

Fuente

¿Qué hacer después de instalar Fedora 23? (Workstation/Server)

2016-05-19T22:43:00.002-04:00

Guía de Post-Instalación
(Workstation & Server)

$ = usuario normal

# = usuario root

Workstation

Primero abriremos una terminal y cambiamos a modo root con el siguiente comando en la consola:

$ su -

Ahora sí, comencemos con la guía...

Optimizar DNF

# dnf -y install yumex dnf-plugins-core

Actualizar tu Sistema

# dnf -y update

Repositorios Extra (Necesarios)

Añadiendo éstos repositorios a tu sistema, podrás encontrar prácticamente cualquier paquete de software (programa) sin problemas. Sólo tienes que recordar que algunos de éstos repositorios contienen paquetes que no se consideran 100% software libre. Sin embargo, en muchos casos necesitarás uno o dos paquetes que vengan de estos repositorios para hacer funcionar ciertas aplicaciones.

RPM Fusion (Free & Non-Free)

# dnf install --nogpgcheck https://download1.rpmfusion.org/free/fedora/rpmfusion-free-release-stable.noarch.rpm https://download1.rpmfusion.org/nonfree/fedora/rpmfusion-nonfree-release-stable.noarch.rpm

# dnf -y update

KDE RedHat (Sólo usuarios de KDE)

# dnf -y install wget && wget https://apt.kde-redhat.org/apt/kde-redhat/fedora/kde.repo -O /etc/yum.repos.d/kde.repo

Drivers Gráficos Libres (NVIDIA ATI, INTEL)

Éstos son los drivers gráficos que deberías usar sin importar tu GPU si estás en Fedora Linux. En el post que enlazamos abajo, explicamos cómo sacar el máximo partido a tu hardware usando dichos drivers sin necesidad de recurrir a los drivers propietarios de los fabricantes.

Mejorar rendimiento de drivers gráficos libres (MESA) en Fedora Linux

Drivers Gráficos Propietarios

Úsalos solo si NO notas un buen rendimiento gráfico con los drivers libres aún después de seguir las instrucciones especificadas en el paso de arriba (y reiniciar) o bien, si vas a hacer gaming pesado en tu máquina.

NOTA: Si cuentas con gráficos AMD/ATI la verdad no vale la pena utilizar los drivers propietarios (a menos que tengas una muy buena razón como la minería de criptodivisas o algo así) ya que los libres funcionan muchísimo mejor en todos los casos de uso comunes, desde videos, pasando por gaming y hasta rendering (entre otras cosas).

Cómo instalar drivers gráficos propietarios NVIDIA en Fedora 22 (y 23)

Cómo instalar drivers gráficos propietarios AMD/ATI en Fedora 22 (y 23)

Cómo instalar "drivers gráficos propietarios" INTEL en Fedora 22 (y 23)

Códecs y Aplicaciones

Los códecs son escenciales para poder reproducir diferentes archivos de audio/video en tu sistema independientemente del formato. Instálate un buen códec pack con el siguiente comando en consola:

# dnf -y install gstreamer1-libav gstreamer1-plugins-bad-free-extras gstreamer1-plugins-bad-freeworld gstreamer1-plugins-good-extras gstreamer1-plugins-ugly gstreamer-ffmpeg xine-lib-extras xine-lib-extras-freeworld k3b-extras-freeworld gstreamer-plugins-bad gstreamer-plugins-bad-free-extras gstreamer-plugins-bad-nonfree gstreamer-plugins-ugly gstreamer-ffmpeg mencoder

Como en todo Sistema Operativo, en Fedora necesitas aplicaciones para poder trabajar en tu computadora con diferentes archivos y bajo diferentes circunstancias/situaciones. Aquí una lista detallada de apps que no pueden faltar en tu sistema Fedora Linux según categoría:

Diseño/Edición

# dnf -y install gimp scribus inkscape blender audacity-freeworld calligra-krita shutter pencil

En esta categoría otras apps importantes son el gestor de fotografías y editor rápido. GNOME tiene a Shotwell mientras que KDE tiene a DigiKam/ShowFoto.

Edición de Vídeo

Cómo instalar Lightworks video editor en Fedora Linux

Multimedia (Audio/Vídeo)

# dnf -y install vlc clementine soundconverter mediainfo

Rip & Burn

# dnf -y install k3b sound-juicer kid3

Administración del sistema

# dnf -y install gparted nano wget curl smartmontools htop inxi bleachbit firewall-config beesu pysdm

Mensajería y Comunicación

# dnf -y install pidgin xchat

E-mail

# dnf -y install thunderbird

Compresión/Decompresión

# dnf -y install unrar unzip zip p7zip p7zip-plugins

Impresoras/Escáneres

# dnf -y install python-qt4 hplip hplip-gui libsane-hpaio simple-scan

Internet

# dnf -y install firefox epiphany uget gigolo

Juegos

# dnf -y install steam

Wine

# dnf -y install wine cabextract
# wget https://winetricks.org/winetricks -O /usr/local/bin/winetricks && chmod +x /usr/local/bin/winetricks

Java

# dnf -y install java-1.8.0-openjdk java-1.8.0-openjdk-devel icedtea-web

Otros

# dnf -y install screenfetch rfkill lsb

Utilidades GNOME

# dnf -y install cheese gnome-shell-extension-common dconf-editor gnome-tweak-tool gtk-murrine-engine* libreoffice-langpack-es

Utilidades KDE

# dnf -y install kamoso digikam kde-i18n-Spanish kde-l10n-es

Software básico de compilación

Necesitarás instalar éstos paquetes si piensas compilar algo dentro de tu Fedora Linux (nunca está demás, siempre te puedes topar con software del que únicamente tengas un tarball por ejemplo); Es definitivamente recomendable instalarlos.

# dnf -y install kernel-headers kernel-devel dkms
# dnf -y install kernel-PAE-devel (Sólo Si tienes Kernel PAE)
# dnf groupinstall "Development Tools" && dnf groupinstall "Development Libraries"

Y con esto termina la parte de códecs y aplicaciones... Aquí también puedes aprovechar para personalizar un poco la selección de apps en tu sistema, yo personalmente elimino todo lo referente a evolution y rhythmbox (con mucho cuidado de no cargarme el sistema con las dependencias) ya que reemplazo estas 2 apps con thunderbird y clementine respectivamente.

Seguridad

Si tienes tu máquina Linux en red junto a máquinas Windows/Mac siempre es bueno tener a la mano un buen anti-rootkit y antivirus (por protección de los demás), ya que aunque linux es prácticamente invulnerable a las amenazas de malware comunes, los otros sistemas no:

Protección anti-malware en Linux (5 tips básicos)

Otras Apps

NOTA: Las apps que se descarguen como paquetes rpm en este apartado se instalan con el comando

dnf -y install ruta/al/paquete.rpm

Esto instalará las dependencias por nosotros y después el paquete descargado como es de esperarse.

LibreOffice (Si usas KDE)

# dnf -y install libreoffice libreoffice-kde libreoffice-langpack-es && dnf -y remove calligra*

Google Chrome

Muy importante ya que es la única manera oficial de poder disfrutar de Flash Player y Netflix en sistemas Linux como Fedora:

Descarga RPM - https://chrome.google.com/

Skype

Descarga RPM - https://www.skype.com/intl/es/get-skype/on-your-computer/linux/

Spotify

Instalar Spotify Linux en Fedora 21 y 22

Atom Editor

Fedora es un sistema operativo mayormente enfocado para programadores e ingenieros, así que asumí que incluir ésta aplicación aquí no estaría demás:

Instalar Atom Editor en Fedora 21 y 22

Electrum Bitcoin Wallet

En el mundo de hoy nunca está demás tener una cartera bitcoin a la mano:

#QuickTip: Install Electrum Bitcoin Wallet on Fedora Linux

PlayOnLinux

Instalar PlayOnLinux en Fedora 21 y 22

VirtualBox

Instalar VirtualBox en Fedora Linux

Extras

Mejorar el rendimiento de Google Chrome (y derivados)

7+ tips para mejorar el rendimiento de tu GNU/Linux

¿Tarjeta inalámbrica Broadcom? ¡Pasa por acá!

Solucionar error "OpenGL GLX context" Steam

SSD en Linux: 10+ Tips & Tweaks

Mejorar el renderizado de tipografías en Fedora Linux

Y pues bueno, aquí termina la parte de post-install para la edición Workstation. Espero como con cada lanzamiento esta guía sea su referencia de elección tras instalar Fedora Linux y pues cualquier cosa no duden en dejarnos un comentario abajo.

Fuente

Install MySQL 5.7 on Fedora 23/22, CentOS/RHEL

2016-05-19T15:38:00.001-04:00

MySQL is a relational database management system (RDBMS) that runs as a server providing multi-user access to a number of databases. This is guide, howto install or upgrade MySQL Community Server latest version 5.7 (5.7.9) on Fedora 23/22/21, CentOS 7.2/6.7/5.11 and Red Hat (RHEL) 7.2/6.7/5.11. This guide works of course with Oracle Linux and Scientific Linux too and MySQL 5.6/5.5 installation is possible too.
Note: If you are upgrading MySQL (from earlier version), then make sure that you backup (dump and copy) your database and configs. And remember run mysql_upgrade command.

Install MySQL Database 5.7.9 on Fedora 23/22/21, CentOS 7.2/6.7/5.11, Red Hat (RHEL) 7.2/6.7/5.11

1. Change root user

su -
## OR ##
sudo -i

su -

## OR ##

sudo -i

2. Install MySQL YUM repository

Fedora

## Fedora 23 ##
dnf install https://dev.mysql.com/get/mysql57-community-release-fc23-7.noarch.rpm

## Fedora 22 ##
dnf install https://dev.mysql.com/get/mysql57-community-release-fc22-7.noarch.rpm

## Fedora 21 ##
yum localinstall https://dev.mysql.com/get/mysql57-community-release-fc21-7.noarch.rpm

## Fedora 23 ##

dnf install https://dev.mysql.com/get/mysql57-community-release-fc23-7.noarch.rpm

## Fedora 22 ##

dnf install https://dev.mysql.com/get/mysql57-community-release-fc22-7.noarch.rpm

## Fedora 21 ##

yum localinstall https://dev.mysql.com/get/mysql57-community-release-fc21-7.noarch.rpm

CentOS and Red Hat (RHEL)

## CentOS 7 and Red Hat (RHEL) 7 ##
yum localinstall https://dev.mysql.com/get/mysql57-community-release-el7-7.noarch.rpm

## CentOS 6 and Red Hat (RHEL) 6 ##
yum localinstall https://dev.mysql.com/get/mysql57-community-release-el6-7.noarch.rpm

## CentOS 5 and Red Hat (RHEL) 5 ## 
yum localinstall https://dev.mysql.com/get/mysql57-community-release-el5-7.noarch.rpm

## CentOS 7 and Red Hat (RHEL) 7 ##

yum localinstall https://dev.mysql.com/get/mysql57-community-release-el7-7.noarch.rpm

## CentOS 6 and Red Hat (RHEL) 6 ##

yum localinstall https://dev.mysql.com/get/mysql57-community-release-el6-7.noarch.rpm

## CentOS 5 and Red Hat (RHEL) 5 ##

yum localinstall https://dev.mysql.com/get/mysql57-community-release-el5-7.noarch.rpm

3. Update or Install MySQL 5.7.9

Fedora 23/22

dnf install mysql-community-server

dnf install mysql-community-server

Fedora 21, CentOS 7.2/6.7/5.11 and Red Hat (RHEL) 7.2/6.7/5.11

yum install mysql-community-server

yum install mysql-community-server

4. Start MySQL server and autostart MySQL on boot

Fedora 23/22/21 and CentOS 7.2

systemctl start mysqld.service ## use restart after update

systemctl enable mysqld.service

systemctl start mysqld.service ## use restart after update

systemctl enable mysqld.service

CentOS 6.7/5.11 and Red Hat (RHEL) 6.7/5.11

/etc/init.d/mysql start ## use restart after update
## OR ##
service mysql start ## use restart after update

chkconfig --levels 235 mysqld on

/etc/init.d/mysql start ## use restart after update

## OR ##

service mysql start ## use restart after update

chkconfig --levels 235 mysqld on

5. Get Your Generated Random root Password

grep 'A temporary password is generated for root@localhost' /var/log/mysqld.log |tail -1

grep 'A temporary password is generated for root@localhost' /var/log/mysqld.log |tail -1

Example Output:

2015-11-20T21:11:44.229891Z 1 [Note] A temporary password is generated for root@localhost: -et)QoL4MLid

2015-11-20T21:11:44.229891Z 1 [Note] A temporary password is generated for root@localhost: -et)QoL4MLid

And password is: -et)QoL4MLid

6. MySQL Secure Installation

Change root password
Remove anonymous users
Disallow root login remotely
Remove test database and access to it
Reload privilege tables

Start MySQL Secure Installation with following command

/usr/bin/mysql_secure_installation

/usr/bin/mysql_secure_installation

Output:

NOTE: RUNNING ALL PARTS OF THIS SCRIPT IS RECOMMENDED FOR ALL MySQL
      SERVERS IN PRODUCTION USE!  PLEASE READ EACH STEP CAREFULLY!


In order to log into MySQL to secure it, we\'ll need the current
password for the root user.  If you\'ve just installed MySQL, and
you haven\'t set the root password yet, the password will be blank,
so you should just press enter here.

Enter current password for root (enter for none): [ENTER YOUR RANDOM PASSWORD HERE]
OK, successfully used password, moving on...

Setting the root password ensures that nobody can log into the MySQL
root user without the proper authorisation.

Set root password? [Y/n] Y
New password: 
Re-enter new password: 
Password updated successfully!
Reloading privilege tables..
 ... Success!


By default, a MySQL installation has an anonymous user, allowing anyone
to log into MySQL without having to have a user account created for
them.  This is intended only for testing, and to make the installation
go a bit smoother.  You should remove them before moving into a
production environment.

Remove anonymous users? [Y/n] Y
 ... Success!

Normally, root should only be allowed to connect from 'localhost'.  This
ensures that someone cannot guess at the root password from the network.

Disallow root login remotely? [Y/n] Y
 ... Success!

By default, MySQL comes with a database named 'test' that anyone can
access.  This is also intended only for testing, and should be removed
before moving into a production environment.

Remove test database and access to it? [Y/n] Y
 - Dropping test database...
 ... Success!
 - Removing privileges on test database...
 ... Success!

Reloading the privilege tables will ensure that all changes made so far
will take effect immediately.

Reload privilege tables now? [Y/n] Y
 ... Success!

Cleaning up...



All done!  If you\'ve completed all of the above steps, your MySQL
installation should now be secure.

Thanks for using MySQL!

NOTE: RUNNING ALL PARTS OF THIS SCRIPT IS RECOMMENDED FOR ALL MySQL

SERVERS IN PRODUCTION USE! PLEASE READ EACH STEP CAREFULLY!

In order to log into MySQL to secure it, we\'ll need the current

password for the root user. If you\'ve just installed MySQL, and

you haven\'t set the root password yet, the password will be blank,

so you should just press enter here.

Enter current password for root (enter for none): [ENTER YOUR RANDOM PASSWORD HERE]

OK, successfully used password, moving on...

Setting the root password ensures that nobody can log into the MySQL

root user without the proper authorisation.

Set root password? [Y/n] Y

New password:

Re-enter new password:

Password updated successfully!

Reloading privilege tables..

... Success!

By default, a MySQL installation has an anonymous user, allowing anyone

to log into MySQL without having to have a user account created for

them. This is intended only for testing, and to make the installation

go a bit smoother. You should remove them before moving into a

production environment.

Remove anonymous users? [Y/n] Y

... Success!

Normally, root should only be allowed to connect from 'localhost'. This

ensures that someone cannot guess at the root password from the network.

Disallow root login remotely? [Y/n] Y

... Success!

By default, MySQL comes with a database named 'test' that anyone can

access. This is also intended only for testing, and should be removed

before moving into a production environment.

Remove test database and access to it? [Y/n] Y

- Dropping test database...

... Success!

- Removing privileges on test database...

... Success!

Reloading the privilege tables will ensure that all changes made so far

will take effect immediately.

Reload privilege tables now? [Y/n] Y

... Success!

Cleaning up...

All done! If you\'ve completed all of the above steps, your MySQL

installation should now be secure.

Thanks for using MySQL!

Note: If you don’t want some reason, do a “MySQL Secure Installation” then at least it’s very important to change the root user’s password

mysqladmin -u root password [your_password_here]

## Example ##
mysqladmin -u root password myownsecrectpass

mysqladmin -u root password [your_password_here]

## Example ##

mysqladmin -u root password myownsecrectpass

7. Connect to MySQL database (localhost) with password

mysql -u root -p

## OR ##
mysql -h localhost -u root -p

mysql -u root -p

## OR ##

mysql -h localhost -u root -p

8. Create Database, Create MySQL User and Enable Remote Connections to MySQL Database

This example uses following parameters:

DB_NAME = webdb
USER_NAME = webdb_user
REMOTE_IP = 10.0.15.25
PASSWORD = password123
PERMISSIONS = ALL

## CREATE DATABASE ##
mysql> CREATE DATABASE webdb;

## CREATE USER ##
mysql> CREATE USER 'webdb_user'@'10.0.15.25' IDENTIFIED BY 'password123';

## GRANT PERMISSIONS ##
mysql> GRANT ALL ON webdb.* TO 'webdb_user'@'10.0.15.25';

##  FLUSH PRIVILEGES, Tell the server to reload the grant tables  ##
mysql> FLUSH PRIVILEGES;

## CREATE DATABASE ##

mysql> CREATE DATABASE webdb;

## CREATE USER ##

mysql> CREATE USER 'webdb_user'@'10.0.15.25' IDENTIFIED BY 'password123';

## GRANT PERMISSIONS ##

mysql> GRANT ALL ON webdb.* TO 'webdb_user'@'10.0.15.25';

## FLUSH PRIVILEGES, Tell the server to reload the grant tables ##

mysql> FLUSH PRIVILEGES;

Enable Remote Connection to MariaDB Server –> Open MySQL Port (3306) on Iptables Firewall (as root user again)

1. Fedora 23/22/21 and CentOS/Red Hat (RHEL) 7.2

1.1 Add New Rule to Firewalld

firewall-cmd --permanent --zone=public --add-service=mysql

## OR ##

firewall-cmd --permanent --zone=public --add --port=3306/tcp

firewall-cmd --permanent --zone=public --add-service=mysql

## OR ##

firewall-cmd --permanent --zone=public --add --port=3306/tcp

1.2 Restart firewalld.service

systemctl restart firewalld.service

systemctl restart firewalld.service

2. CentOS/Red Hat (RHEL) 6.7/5.11

2.1 Edit /etc/sysconfig/iptables file:

nano -w /etc/sysconfig/iptables

nano -w /etc/sysconfig/iptables

2.2 Add following INPUT rule:

-A INPUT -m state --state NEW -m tcp -p tcp --dport 3306 -j ACCEPT

-A INPUT -m state --state NEW -m tcp -p tcp --dport 3306 -j ACCEPT

2.3 Restart Iptables Firewall:

service iptables restart
## OR ##
/etc/init.d/iptables restart

service iptables restart

## OR ##

/etc/init.d/iptables restart

3. Test remote connection

mysql -h 10.0.15.25 -u myusername -p

mysql -h 10.0.15.25 -u myusername -p

How to create a bootable USB stick on Ubuntu

2016-05-19T12:06:00.001-04:00

To create a USB stick from which you can install Ubuntu, you must first download Ubuntuand, if you want, verify the download.

Then, follow these instructions:

Insert a USB stick with at least 2GB of free space
Open the dash and search for Startup Disk Creator
Select the Startup Disk Creator to launch the app
Click 'Other' to choose the downloaded ISO file if it isn’t found automatically, select the file and click 'Open'
Select the USB stick in the bottom box and click 'Make Startup Disk' and then 'Yes'
That's it! When the process completes, you'll be ready to restart your computer and begin installing Ubuntu

Instalando Cinnamon 3.0 en Ubuntu 16.04

2016-05-19T10:37:00.001-04:00

A la espera de LM 18, no pude aguantarme sin probar Cinnamon 3.0 el escritorio estrella de Linux Mint.

En esta nueva versión, Cinnamon 3.0 anexa estas pocas nuevas características:
– Mejoras en la gestión de las ventanas, los diferentes modos de acople y su funcionamiento en general.
– Mejor soporte por defecto del panel táctil, que mejora en prestaciones de multitoque.
– La configuración de accesibilidad y sonido ha sido reescrita como módulos propios de Cinnamon.

– Opción de renombrar los dispositivos conectados a la batería.
– Opción para establecer diferentes aplicaciones preferidas para los archivos de texto plano, documentos y código fuente.
– Los lanzadores del panel agregaron soporte para acciones de la aplicación.
– Efectos de animación activados por defecto en menús y cuadros de diálogo.
– Las opciones de favoritos y sistema se pueden desactivar en el applet del menú.
– El applet de marco de fotos escanea subdirectorios.
– Mejor soporte para GTK 3.20, Spotify 0.27, Viber.

Si bien tenemos pocas novedades, el peso de este escritorio sumado a Linux Mint hace que muchos querramos probarlo, por suerte su paquetería ya esta disponible para ser instalada.Tendremos que tener en cuenta que este es un cambio radical, es necesario por precaución realizar un respaldo de nuestra info.

La instalación es relativamente sencilla:

# sudo add-apt-repository ppa:embrosyn/cinnamon
# sudo apt-get update
# sudo apt-get install cinnamon

Si no nos gusta, con otro par de comandos podremos desinstalarlo:

# sudo apt-get install ppa-purge
# sudo ppa-purge ppa:embrosyn/cinnamon

Luego de la instalación, existe un problema con el menú de apagado, se soluciona así:

# gsettings set org.cinnamon.desktop.session settings-daemon-uses-logind true
# gsettings set org.cinnamon.desktop.session session-manager-uses-logind true
# gsettings set org.cinnamon.desktop.session screensaver-uses-logind false

La verdad Cinnamon me encanta lo utilizo desde siempre y si bien en esta nueva versión no trae muchas características nuevas, el refinamiento y pulimiento de este entorno de escritorio lo hace a mi gusto indispensable para lograr mi distro preferida.

Installing KDE Plasma 5

2016-05-18T19:09:00.001-04:00

KDE Plasma 5 is one of the main desktop spins in Fedora. It’s under heavy development and a lot of things are changing. There are plenty of new features, bug fixing, and optimizing code. It’s an expansive desktop environment with programs for all basic tasks. There are also applications that can be used for sciences, design work, finances, and more.

Installing KDE Plasma 5

To install KDE Plasma 5 in an existing Fedora installation, there are two commands you will use in a command line (i.e. terminal) to do this. They will install the latest version of KDE and extra packages for additional features and functionality. As mentioned earlier, the Plasma 5 desktop is an expansive desktop packed with many features, and the initial installation size will run around 300MB (worth noting for anyone with poor bandwidth or connectivity). After installation, it will expand to about 1GB in total size.

Said that, you can run the following commands for the installation of KDE Plasma 5.

$ sudo dnf group install kde-desktop-environment

You will first be prompted to enter your password (to gain root user privileged temporarily). Afterwards, it will list all of the packages to install, the approximate download size (usually around 300MB), the final size once installed (usually near 1GB). If you are ready to proceed, you can enter y (or the letter that means “yes” in your language) and press enter.

From here, downloading and installing the packages for KDE Plasma 5 will take a while a while. You might want to resume other daily tasks while you’re waiting, depending on your connection speed. If you’re using GNOME or Cinnamon, there should be a notification from the terminal once the installation is finished.

Getting started with KDE Plasma 5

Once it is installed, you can log into KDE Plasma 5 as your desktop environment after restarting your Fedora computer. From the login menu, you can look for a gear-like icon or other symbol (depending on what your initial desktop was) and choose to log in with KDE Plasma 5.

When you first log in, you’ll be greeted by an empty screen and a task bar with a menu on the bottom. To begin making modifications to your new desktop, you will want to open the System Settings application from the menu.

KDE Plasma 5 System Settings

If you are familiar with previous versions of KDE Plasma, you will notice some things have changed since previous releases. There are new methods of applying themes and wallpaper changes. You can pick from what is installed by default or use a site like KDE-Look.org to find additional modifications to your environment.

Color schemes

An interesting feature recently added is that Plasma themes are able to follow color schemes. You can pick a scheme for Qt and apply it your Plasma desktop to have that color scheme reflected in your various windows, applications, and menus.

One of the many ways Qt can look in KDE Plasma 5.

Adjusting the user icon

As mentioned earlier, the KDE Plasma 5 desktop is under active development, and there are some minor features that are not yet implemented, such as changing your user icon for your account. The developers are aware and are planning on adding ways to do these things in the future. However, in the meanwhile, you can manually add a profile icon by manually placing an image with the name username.face.icon in the /usr/share/sddm/faces/ directory (remember, if you’re using a custom theme, icons may not be supported).

Get a taste of the coast with the SDDM Maui theme.

This is simple, lighter-colored Plasma 5 desktop.

Performance with Plasma 5

For those worried about performance and computer resources, Plasma 5 is a good option. It isn’t as heavyweight as previous versions of KDE Plasma, and you can also reduce the number of effects running in your desktop as well if you need to (I was able to run it well with 1GB of RAM in an Atom notebook).

KDE looks and works nicely with both GTK and Qt programs. This image is just an example of that.

Firefox and Kontact, the KDE email and calendar client, side by side.

Learn more about KDE Plasma 5

You may want to see what’s new in Plasma 5.You can visit spins.fedoraproject.org to download the KDE spin of Fedora and visit the wiki to read more about using KDE. Additionally, if you have used KDE in the past, you can get a better idea of what is specifically new in this version from a previous article on the Fedora Magazine.

Fedora LiveUSB Creator

2016-05-18T16:19:00.001-04:00

Las distribuciones de Linux basan su funcionamiento en software libre y código abierto, lo que permite a cualquiera con los conocimientos necesarios adaptarlos a sus necesidades. Sin embargo, convertir un sistema en una distribución para llevarno es una tarea sencilla. El sistema debe configurarse de forma automática como las distribuciones live, pero al mismo tiempo debe aprovechar la ventaja que suponen los pendrives respecto a los discos ópticos: posibilidad de guardar los cambios que hagamos al sistema.

Hoy veremos algunas distribuciones que han trabajado en este aspecto, ofreciéndonos un entorno live que permite guardar los cambios en elpendrive, y que además son muy sencillas de instalar. El pendrive puede seguir siendo utilizado para otros propósitos, ya que el contenido de estas distribuciones convive con los archivos existentes

Fedora

Esta distribución de propósito general con el respaldo de Red Hat pone a nuestra disposición una herramienta llamadaFedora LiveUSB Creator, con versión tanto para Windows como para Linux.

El funcionamiento es muy sencillo, todo lo que tenemos que hacer es seleccionar un pendrive, la versión que la distribución que queramos descargar de Internet y el espacio de almacenamiento persistente que queramos reservar en el pendrive. También podemos seleccionar una ISO descargada previamente en lugar de descargarla en el momento.

Lo que hace la aplicación es preparar el pendrive para que sea arrancable y crear unos archivos que conviven con el resto del contenido del mismo. Entre esos archivos está una imagen de disco donde guarda todos los cambios que hagamos.

Variantes: Escritorio KDE o Gnome, de 32 bits o 64 bits.
Espacio necesario: 700MB + Persistencia.
Más información: Fedora, Fedora LiveUSB Creator.

Ubuntu

La distribución más popular también tiene un método de creación de discos USB que es muy parecido al incluido en Fedora. En esta ocasión, deberemos descargarnos manualmente la imagen ISO a partir de la que queramos crear el pendrive. Si no estamos utilizando ya Ubuntu, además, deberemos grabarla en un CD y arrancar con ella.

Una vez dentro de Ubuntu vamos a Sistema »Administración » Creación de discos USB de inicio. Primero seleccionamos la unidad de disco o la imagen ISO donde está el CD de Ubuntu. Luego seleccionamos el pendrive. Por último, seleccionamos el tamaño del almacenamiento persistente donde se irán guardando los cambios que hagamos, si así lo deseamos.

Variantes: Todas las variantes oficiales de Ubuntu, de 32 o 64 bits.
Espacio necesario: 700MB + Persistencia
Más información: Ubuntu, USB Creator.

Sidux

Esta distribución basada en la rama inestable de Debian tiene también su propio método de creación de pendrives arrancables. Primero hay que descargarse la distribución, grabarla en un CD, arrancar con ella y una vez dentro seleccionar la opción Sistema » install-sidux-to-usb.

Como podemos ver en su página de descargas tiene tres variantes: una con KDE 4.2 muy completa, otra también con KDE 4.2 pero con menos programas algo más ligera y otra con XFCE.

Desgraciadamente, esta distribución requiere un pendrive de mayor capacidad que las otras opciones, ya que reserva un archivo de persistencia bastante grande. En el manual recomiendan un pendrive de al menos 2GB de capacidad para las versiones más ligeras.

Variantes: Escritorio KDE completo, KDE recortado o XFCE.
Espacio necesario: Al menos 2GB, dependiendo de la versión.
Más información: Sidux, Instrucciones de instalación USB.

Slax

Este derivado de Slackware tiene la peculiaridad de que, desde su página web, podemos construir la distribución a nuestro gusto con los programas que queramos. Solo tenemos que acceder a la sección de módulos e ir navegando por la lista de paquete disponibles seleccionando la opción añadir a la construcción.

Una vez hayamos terminado de seleccionar los paquetes que queramos podemos terminar de construir la distribución desde la sección de construcción. Ahí podemos descargar una imagen ISO para grabar en CD o un paquete comprimido en TAR que podemos instalar directamente en un pendrive.

Si no queremos rompernos demasiado la cabeza también podemos descargarnos la compilación por defecto que lleva KDE 3.5.10 y unos programas bastante ligeros que dejan la distribución en unos nimios 200MB.

Para instalar Slax en un pendrive, basta con descomprimir el contenido del paquete TAR allí y ejecutar boot/bootinst.sh si estamos en un sistema Linux oboot/bootinst.bat si estamos en Windows.

Variantes: KDE 3.5.10 personalizable.
Espacio necesario: A partir de 200MB + Persistencia.
Más información: Slax

Otras opciones y herramientas

Existen otras herramientas no provistas por los autores de las distribuciones que también permiten la instalación en pendrives.

Una bastante conocida que solo está disponible para Windows es Linux Live USB Creator, evolución del usBuntu Live Creator que ya hemos visto por Biteliaanteriormente. Tiene un funcionamiento muy similar al instalador de Fedora o el de Ubuntu, pero permite además instalar otras distribuciones como Linux Mint oMandriva. Dispone de una opción bastante interesante para configurar unVirtualBox y así arrancar las distribuciones directamente desde dentro de Windows.

La página PendriveLinux ofrece métodos de instalación alternativos bastante interesantes para Ubuntu y otras distribuciones. También hay artículos con instrucciones avanzadas para arrancar los pendrives utilizando CDs de arranque, necesarios en ordenadores donde el arranque por USB esté desactivado.

MÁS DE: DEBIAN, FEDORA, KUBUNTU, LINUX MINT, MANDRIVA, MEMORIA USB FLASH,PENDRIVE, STICK USB, XUBUNTU

java.lang.NullPointerException

2016-05-17T10:39:00.002-04:00

OBJETOS NULL Y JAVA.LANG.NULLPOINTEREXCEPTION

La palabra reservada “null” indica que una variable que referencia a un objeto se encuentra “sin objeto”, es decir, la variable ha sido declarada pero no apunta a ningún objeto. Esto puede deberse a que no se haya inicializado asignándole un objeto mediante la instrucción new, o a que hayamos borrado la referencia que contenía la variable.

Si a un objeto no inicializado (referencia null) se le trata de aplicar un método o se intenta hacerlo intervenir en un proceso que requiere un objeto inicializado, se obtiene una excepción tipo “NullPointerException”. Vamos a forzar que aparezca una excepción de este tipo. Para ello, crea dos clases y escribe el código que indicamos a continuación en cada una de ellas.

// Ejemplo aprenderaprogramar.com

import java.util.ArrayList;

public class ListaNumeros {

private ArrayList<Integer> listaDeNumeros;

public ListaNumeros () { } // El constructor está vacío

public Integer sumatorio () {

Integer suma = 0;

for (Integer numero : listaDeNumeros) { suma = suma + numero; }

return suma;

} //Cierre del método sumatorio

public void añadirItem (Integer item) {

listaDeNumeros.add (item);

} //Cierre del método

} //Cierre de la clase

// Ejemplo aprenderaprogramar.com

public class TestNull {

public static void main (String [] Args) {

ListaNumeros lista1 = new ListaNumeros();

System.out.println ("El sumatorio actual es: " + lista1.sumatorio() );

} //Cierre del main

} //Cierre de la clase

Ejecuta ahora la clase que contiene el método main. El resultado será algo así:

El programa se empieza a ejecutar y en un momento determinado, se detiene (error en tiempo de ejecución). En la ventana del editor nos aparece java.lang.NullPointerException y en la ventana de consola nos aparecen referencias a las líneas de las clases en las que ha saltado el error. ¿A qué se debe este error? Java empieza a ejecutar el programa y reserva memoria para un objeto ListaDeNumeros. Como el constructor de esa clase está vacío, la variable tiene como referencia null. Al tratar de hacer un recorrido con un for extendido salta el error que indica que no se puede aplicar ese proceso sobre una variable que referencia a null. Modifica el constructor introduciendo este código: public ListaNumeros () { listaDeNumeros = new ArrayList<Integer> (); }

Comprueba que ahora el programa se ejecuta sin que salte ningún error. Los errores de tipo NullPointerException ocurren con frecuencia al tratar de añadir un ítem a una colección (lista, conjunto, etc.) sin haber inicializado explícitamente esa colección. No basta con que exista una declaración de la variable: hay que inicializarla.

Recordar: una variable (campo) que referencia a un objeto y no ha sido inicializada explícitamente contiene por defecto el valor null. En ocasiones podemos comprobar si una variable referencia a un objeto inicializado haciendo comprobaciones de este tipo:

if ( ofertaMaxima == null ) { instrucciones A } else { instrucciones B }

Este tipo de comprobaciones constituyen una medida de seguridad para evitar que se pueda intentar realizar un proceso no permitido como aplicar un método a una variable que contiene null.

AUTOBOXING Y UNBOXING. CONVERSIÓN AUTOMÁTICA DE TIPOS ENVOLTORIO A PRIMITIVOS Y VICEVERSA

Comentamos en su momento que cada tipo primitivo tenía un tipo equivalente objeto. A los tipos objeto los denominábamos envoltorios. Dado que las colecciones como ArrayList contienen objetos y no tipos primitivos, puede parecer que esta circunstancia complica la programación si queremos por ejemplo trabajar con colecciones de números. Java solventa esta situación realizando una conversión automática desde el tipo primitivo al envoltorio (autoboxing) o viceversa (unboxing). En el programa anterior son válidas expresiones como Integer suma = 0; ó lista1.añadirItem (7). El método añadirItem espera un objeto Integer. Sin embargo, le pasamos un tipo primitivo y lo acepta. Esto es debido al autoboxing que realiza el compilador Java en segundo plano evitando que salte un error.

El autoboxing y unboxing es una posibilidad destinada a facilitar el trabajo del programador, pero esto no elimina la necesidad de tener muy claro qué es un tipo primitivo y qué es un objeto y cuándo se requiere uno u otro. Comprobarás que no se puede, y no se debe, tratar de usar tipos primitivos y envoltorios como si se tratara de la misma cosa.

OBJETOS ANÓNIMOS

Consideremos el siguiente código:

//Ejemplo aprenderaprogramar.com

ListaNumeros lista1 = new ListaNumeros();

Integer num1 = new Integer (6);

lista1.añadirItem (num1);

lista1.añadirItem (7);

Cuando añadimos el objeto num1, conocemos el nombre del objeto que añadimos. Cuando añadimos mediante autoboxing un Integer que contiene el número 7, desconocemos el nombre de ese objeto. Estos objetos que no tienen nombre específico se denominan “objetos anónimos”. El uso de objetos anónimos es frecuente en toda situación en la que carece de interés disponer de nombres específicos para los objetos. La forma de crear objetos anónimos admite distintas sintaxis. Estos son algunos ejemplos:

//Ejemplos aprenderaprogramar.com

grupoDepositos.add (new Deposito (diametroNuevo, alturaNuevo, idNuevo) );

librería.add (new Libro (“Elogio de la locura”, “Erasmo de Rotterdam”);

club.add (new Persona (“Juan Romero Sánchez”, 32);

EJERCICIO

Responde a las siguientes preguntas. ¿Se puede acceder a un objeto anónimo contenido en un ArrayList? ¿Se puede inicializar un objeto de una clase que contiene tres atributos de tipo objeto declarando en el constructor que los atributos se inicializan mediante objetos anónimos? Puedes comprobar si tus respuestas son correctas consultando en los foros aprenderaprogramar.com.

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link: Ver curso completo.

Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

fconfig vs ip: What’s Difference and Comparing Network Configuration

2016-05-17T10:37:00.002-04:00

Linux based distributions have featured set of commands which provide way to configure networking in easy and powerful way through command-line. These set of commands are available from net-tools package which has been there for a long time on almost all distributions, and includes commands like: ifconfig, route, nameif,iwconfig, iptunnel, netstat, arp.

Ifconfig Vs IP Command

These commands are just about sufficient in configuring the network in a way any novice or an expert Linux user would want, but due to advancement in Linux kernel over past years and unmaintainable of this packaged set of commands, they are getting deprecated and a more powerful alternative which has ability to replace all of these commands is emerging.

This alternative has also been there for quite some time now and is much more powerful than any of these commands. Rest of sections would highlight this alternative and compare it with one of the command from net-tools package i.e. ifconfig.

ip – A Replacement for ifconfig

ifconfig has been there for a long time and is still used to configure, display and control network interfaces by many, but a new alternative now exists on Linux distributions which is much more powerful than it. This alternative is ip command from iproute2util package.

Although this command might seem a bit complex at first site but it is much broader in functionality thanifconfig. It is functionally organized on two layers of Networking Stack i.e. Layer 2 (Link Layer), Layer 3 (IP Layer) and does the work of all the above mentioned commands from net-tools package.

While ifconfig mostly displays or modifies the interfaces of a system, this command is capable of doing following tasks:

Displaying or Modifying Interface properties.
Adding, Removing ARP Cache entries along creating new Static ARP entry for a host.
Displaying MAC addresses associated with all the interfaces.
Displaying and modifying kernel routing tables.

One of the main highlight which separates it from its ancient counterpart ifconfig is that latter uses ioctl for network configuration, which is a less appreciated way of interaction with kernel while former takes advantage of netlink socket mechanism for the same which is a much more flexible successor of ioctl for inter-communication between kernel and user space using rtnetlink (which adds networking environment manipulation capability).

We can now begin to highlight the features of ifconfig and how they are effectively replaced by ip command.

ip vs ifconfig Commands

Following section highlights some of ifconfig commands and their replacement using ip commands:

1. Displaying all Network Interfaces in Linux

Here, one distinguishing feature between ip and ifconfig is that whereas ifconfig only shows enabled interfaces, ip shows all the interfaces whether enabled or disabled.

ifconfig Command

$ ifconfig

ifconfig: Check IP Address

ip Command

$ ip a

ip: Check IP Address

2. Adding or Deleting an IP Address in Linux

The below command assigns the IP address 192.168.80.174 to the interface eth0.

ifconfig – Add/Del IP Address

# ifconfig eth0 add 192.168.80.174

Syntax for adding/removing an interface using ifconfig command:


# ifconfig eth0 add 192.168.80.174

# ifconfig eth0 del 192.168.80.174

ip – Add/Del IP Address

# ip a add 192.168.80.174 dev eth0

Syntax for adding/removing an interface using ip command:


# ip a add 192.168.80.174 dev eth0

# ip a del 192.168.80.174 dev eth0

4. Add MAC Hardware Address to Network Interface

The below command sets the hardware address for the interface eth0 to the value specified in the command. This can be verified by checking the HWaddr value in the output of ifconfig command.

ifconfig – Add MAC Address

Here, the syntax for adding MAC address using ifconfig command:

# ifconfig eth0 hw ether 00:0c:29:33:4e:aa

ip – Add MAC Address

Here, the syntax for adding MAC address using ip command:

# ip link set dev eth0 address 00:0c:29:33:4e:aa

4. Setting Other Configurations of Network Interface

Apart from setting IP address or Hardware address, other configurations that can be applied to an interface include:

MTU (Maximum Transfer Unit)
Multicast flag
Transmit Queue length
Promiscuous mode
Enable or disable all multicast mode

ifconfig – Other Network Configurations

ip – Other Network Configurations

a. Set MTU value to 2000.

# ifconfig eth0 mtu 2000

# ip link set dev eth0 mtu 2000

b. Enable or Disable multicast flag.

# ifconfig eth0 multicast

# ip link set dev eth0 multicast on

c. Setting the transmit queue length.

# ifconfig eth0 txqueuelen 1200

# ip link set dev eth0 txqueuelen 1200

d. Enabling or disabling promiscuous mode.

# ifconfig eth0 promisc

# ip link set dev eth0 promisc on

e. Enable or disable all multicast mode.

# ifconfig eth0 allmulti

# ip link set dev eth0 allmulti on

5. Enabling or Disabling Network Interface

The below commands enable or disable specific network interface.

ifconfig – Disable/Enable Network Interface

The below command disables the interface eth0 and it is verified by output of ifconfig which by default shows only those interfaces which are up.

# ifconfig eth0 down

To re-enable the interface, just replace down by up.

# ifconfig eth0 up

ip – Disable/Enable Network Interface

The below ip command is alternative for ifconfig to disable a specific interface. This can be verified by the output of 'ip a' command which shows all the interfaces by default, either up or down, but highlights their status along with the description.

# ip link set eth0 down

To re-enable the interface, just replace down with up.

# ip link set eth0 up

6. Enable or disable the use of ARP protocol

The below commands enable or disable ARP protocol on specific network interface.

ifconfig – Enable/Disable ARP Protocol

The command enables ARP protocol to be used with interface eth0. To disable this option, just replace arp with-arp.

# ifconfig eth0 arp

ip – Enable/Disable ARP Protocol

This command is the ip alternative to enable ARP for the interface eth0. To disable, just replace on with off.

# ip link set dev eth0 arp on

Conclusion

Thus, we have highlighted features of ifconfig command and how they can be done using ip command. Currently, Linux distributions provides a user with both the commands so that he can use according to his convenience. So, which command is convenient according to you which you would prefer to use? Do mention this in your comments.

fuente: http://www.tecmint.com/ifconfig-vs-ip-command-comparing-network-configuration/


	import { MatInputModule, MatPaginatorModule, MatProgressSpinnerModule,
	MatSortModule, MatTableModule } from "@angular/material";

	@NgModule({
	declarations: [
	...
	],
	imports: [
	BrowserModule,
	BrowserAnimationsModule,
	HttpClientModule,
	MatInputModule,
	MatTableModule,
	MatPaginatorModule,
	MatSortModule,
	MatProgressSpinnerModule
	],
	providers: [
	...
	],
	bootstrap: [AppComponent]
	})
	export class AppModule {

	}


	<mat-table class="lessons-table mat-elevation-z8" [dataSource]="dataSource">

	<ng-container matColumnDef="seqNo">
	<div *matHeaderCellDef>#</div>
	<div *matCellDef="let lesson">{{lesson.seqNo}}</div>
	</ng-container>

	<ng-container matColumnDef="description">
	<div *matHeaderCellDef>Description</div>
	<div class="description-cell"
	*matCellDef="let lesson">{{lesson.description}}</div>
	</ng-container>

	<ng-container matColumnDef="duration">
	<div *matHeaderCellDef>Duration</div>
	<div class="duration-cell"
	*matCellDef="let lesson">{{lesson.duration}}</div>
	</ng-container>

	<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

	<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>

	</mat-table>


	<mat-table class="lessons-table mat-elevation-z8" [dataSource]="dataSource">

	<ng-container matColumnDef="seqNo">
	<mat-header-cell *matHeaderCellDef>#</mat-header-cell>
	<mat-cell *matCellDef="let lesson">{{lesson.seqNo}}</mat-cell>
	</ng-container>

	<ng-container matColumnDef="description">
	<mat-header-cell *matHeaderCellDef>Description</mat-header-cell>
	<mat-cell class="description-cell"
	*matCellDef="let lesson">{{lesson.description}}</mat-cell>

	</ng-container>

	<ng-container matColumnDef="duration">
	<mat-header-cell *matHeaderCellDef>Duration</mat-header-cell>
	<mat-cell class="duration-cell"
	*matCellDef="let lesson">{{lesson.duration}}</mat-cell>
	</ng-container>

	<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

	<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>

	</mat-table>


	<mat-row *matRowDef="let row; columns: displayedColumns"
	(click)="onRowClicked(row)">
	</mat-row>


	@Injectable()
	export class CoursesService {

	constructor(private http:HttpClient) {}

	findLessons(
	courseId:number, filter = '', sortOrder = 'asc',
	pageNumber = 0, pageSize = 3): Observable<Lesson[]> {

	return this.http.get('/api/lessons', {
	params: new HttpParams()
	.set('courseId', courseId.toString())
	.set('filter', filter)
	.set('sortOrder', sortOrder)
	.set('pageNumber', pageNumber.toString())
	.set('pageSize', pageSize.toString())
	}).pipe(
	map(res => res["payload"])
	);
	}
	}


	import {CollectionViewer, DataSource} from "@angular/cdk/collections";

	export class LessonsDataSource implements DataSource<Lesson> {

	private lessonsSubject = new BehaviorSubject<Lesson[]>([]);

	constructor(private coursesService: CoursesService) {}

	connect(collectionViewer: CollectionViewer): Observable<Lesson[]> {
	...
	}

	disconnect(collectionViewer: CollectionViewer): void {
	...
	}

	loadLessons(courseId: number, filter: string,
	sortDirection: string, pageIndex: number, pageSize: number) {
	...
	}
	}


	export class LessonsDataSource implements DataSource<Lesson> {

	private lessonsSubject = new BehaviorSubject<Lesson[]>([]);
	private loadingSubject = new BehaviorSubject<boolean>(false);

	public loading$ = this.loadingSubject.asObservable();

	constructor(private coursesService: CoursesService) {}

	connect(collectionViewer: CollectionViewer): Observable<Lesson[]> {
	return this.lessonsSubject.asObservable();
	}

	disconnect(collectionViewer: CollectionViewer): void {
	this.lessonsSubject.complete();
	this.loadingSubject.complete();
	}

	loadLessons(courseId: number, filter = '',
	sortDirection = 'asc', pageIndex = 0, pageSize = 3) {

	this.loadingSubject.next(true);

	this.coursesService.findLessons(courseId, filter, sortDirection,
	pageIndex, pageSize).pipe(
	catchError(() => of([])),
	finalize(() => this.loadingSubject.next(false))
	)
	.subscribe(lessons => this.lessonsSubject.next(lessons));
	}
	}


	@Component({
	selector: 'course',
	templateUrl: './course.component.html',
	styleUrls: ['./course.component.css']
	})
	export class CourseComponent implements OnInit {

	dataSource: LessonsDataSource;
	displayedColumns= ["seqNo", "description", "duration"];

	constructor(private coursesService: CoursesService) {}

	ngOnInit() {
	this.dataSource = new LessonsDataSource(this.coursesService);
	this.dataSource.loadLessons(1);
	}
	}


	<div class="course">

	<div class="spinner-container" *ngIf="dataSource.loading$ \| async">
	<mat-spinner></mat-spinner>
	</div>

	<mat-table class="lessons-table mat-elevation-z8" [dataSource]="dataSource">
	....
	</mat-table>
	</div>


	ngAfterViewInit() {
	this.paginator.page
	.pipe(
	tap(() => this.loadLessonsPage())
	)
	.subscribe();
	}


	<mat-table class="lessons-table mat-elevation-z8" [dataSource]="dataSource"
	matSort matSortActive="seqNo" matSortDirection="asc" matSortDisableClear>

	<ng-container matColumnDef="seqNo">
	<mat-header-cell *matHeaderCellDef mat-sort-header>#</mat-header-cell>
	<mat-cell *matCellDef="let lesson">{{lesson.seqNo}}</mat-cell>
	</ng-container>

	....

	</mat-table>


	<div class="course">

	<!-- New part: this is the search box -->
	<mat-input-container>
	<input matInput placeholder="Search lessons" #input>
	</mat-input-container>

	<div class="spinner-container" *ngIf="dataSource.loading$ \| async">
	<mat-spinner></mat-spinner>
	</div>

	<mat-table class="lessons-table mat-elevation-z8" [dataSource]="dataSource"
	matSort matSortActive="seqNo" matSortDirection="asc" matSortDisableClear>

	<ng-container matColumnDef="seqNo">
	<mat-header-cell *matHeaderCellDef mat-sort-header>#</mat-header-cell>
	<mat-cell *matCellDef="let lesson">{{lesson.seqNo}}</mat-cell>
	</ng-container>

	<ng-container matColumnDef="description">
	<mat-header-cell *matHeaderCellDef>Description</mat-header-cell>
	<mat-cell class="description-cell"
	*matCellDef="let lesson">{{lesson.description}}</mat-cell>
	</ng-container>

	<ng-container matColumnDef="duration">
	<mat-header-cell *matHeaderCellDef>Duration</mat-header-cell>
	<mat-cell class="duration-cell"
	*matCellDef="let lesson">{{lesson.duration}}</mat-cell>
	</ng-container>

	<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
	<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>

	</mat-table>

	<mat-paginator [length]="course?.lessonsCount" [pageSize]="3"
	[pageSizeOptions]="[3, 5, 10]"></mat-paginator>
	</div>


	// server-side search
	fromEvent(this.input.nativeElement,'keyup')
	.pipe(
	debounceTime(150),
	distinctUntilChanged(),
	tap(() => {
	this.paginator.pageIndex = 0;
	this.loadLessonsPage();
	})
	)
	.subscribe();

Devops everywhere

Angular Material Data Table: A Complete Example (Server Pagination, Filtering, Sorting)

Table Of Contents

Importing Angular Material modules

Introduction to the Angular Material Data Table

Material Data Table Column Definitions

The Material Data Table Auxiliary Definition Directives

The matHeaderCellDef and matCellDef Directives

Applying a Material Design to the Data Table

The matCellDef Directive

The mat-header-row component and the matHeaderRowDef directive

The mat-row component and the matRowDef directive

Interacting with a given table data row

Data Sources and the Data Table Reactive Design

Data Table core design principles

Why not use MatTableDataSource?

Fetching Data from the backend

Breaking down the LessonsService implementation

Implementing a Custom Angular CDK Data Source

Breaking down the design of an Angular CDK Data Source

How to implement the DataSource connect() method

Why use BehaviorSubject?

Custom Material CDK Data Source - Full Implementation Review

Data Source Loading Indicator Implementation Breakdown

The connect() method implementation

The disconnect() method implementation

The loadLessons() method implementation

Handling Backend Errors

Linking a Data Source with the Data Table

Breaking down the ngOnInit method

Displaying a Material Loading Indicator

Adding a Data Table Material Paginator

How to Link the Material Paginator to the Data Source

Breaking down the ngOnInit() method

How is the Paginator linked to the Data Source?

Why have we used the tap() operator?

View the Paginator in Action

Adding Sortable Material Headers

Linking the Sortable column header to the Data Source

The Material Sort Header In Action

Adding Server-Side Filtering

Breaking down the Search Box implementation

Final Component with Server Pagination, Sorting and Filtering

Getting a reference to the Search Input Box

Conclusions

Source Code + Github Running Example

Angular University

Angular University

Other Angular Material posts:

Video Lessons Available on YouTube

Spring Data JPA using Hibernate and Java Configuration with Annotations

1. The Project Structure

2. Create a new Spring Boot project

3. Maven Dependencies

4. Spring Configuration using Java Annotations and Hibernate

5. Person Model

6. Person Repository

7. Demo

Resources

Wildfly – Install PostgreSQL JDBC Driver as a Module

Creating a Module

UTL_MATCH : String Matching by Testing Levels of Similarity/Difference

Setup

EDIT_DISTANCE

EDIT_DISTANCE_SIMILARITY

JARO_WINKLER

JARO_WINKLER_SIMILARITY

Adapter java

Adapter

Docker 101 Tutorial

Docker 101 Tutorial

Install and run

How it works

Authors and Contributors

Support or Contact

Support or Contact

Oracle/PLSQL: ORA-01403

Description

Cause

Resolution

The `matHeaderCellDef` and `matCellDef` Directives

The `matCellDef` Directive

The `mat-header-row` component and the `matHeaderRowDef` directive

The `mat-row` component and the `matRowDef` directive

Why not use `MatTableDataSource`?

Breaking down the `LessonsService` implementation

How to implement the DataSource `connect()` method

Why use `BehaviorSubject`?

The `connect()` method implementation

The `disconnect()` method implementation

The `loadLessons()` method implementation

Breaking down the `ngOnInit` method

Breaking down the `ngOnInit()` method

Why have we used the `tap()` operator?